检索Google Maps地图位置（小训练）
名称：检索地图位置
内容：地图初期显示和检索显示
功能：根据条件检索地图的经度与纬度
1.在这之前我们需要创建一个表（Accoun__c），添加一个重要的字段地理位置情報，它会默认的给你两个字段经度和纬度。
2.然后在Eclipse中往表的字段添加一些内容
3.因为需要调数据，所以要page页面与控制器进行交互
4.这里我用到了@RemoteAction(远程操作)的Ajax请求，具体代码如下：
<apex:page controller="CL_MapDoSearchController">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function myLoad() { // 初期显示
var myLatLng = new google.maps.LatLng(12, 14);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var hidden = document.getElementById("{!$Component.form.pageBlock1.hidden}").value;
if(hidden == "true"){ // 根据判断来执行
dosearch(); // 检索
}
}
function dosearch(){
Visualforce.remoting.Manager.invokeAction ( // 远程操作
'{!$RemoteAction.CL_MapDoSearchController.selectList}',
document.getElementById("j_id0:form:pageBlock1:j_id2:j_id3:a").value,
document.getElementById("j_id0:form:pageBlock1:j_id2:j_id5:b").value,
document.getElementById("j_id0:form:pageBlock1:j_id2:j_id7:c").value,
resultFunction,
{escape: true}
);
}
function resultFunction(result, event){ // result:是List数据结果
if (event.status) { // 写条件的过程
if(result != null && result.length > 0) {
var myLatLng = new google.maps.LatLng(39, 12);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i=0;i<result.length;i++){
var lng = result[i].location__Longitude__s; // 经度的字段
var lat = result[i].location__Latitude__s; // 纬度的字段
var myLatLng1 = new google.maps.LatLng(lat, lng);
var j = i+1+""; // 循环显示的次数
// 图标显示的地点
var marker = new google.maps.Marker({ position: myLatLng1,
label:j,
map: map, icon: "http://img.zcool.cn/community/01d9b15541bb21000001e78c6478c5.jpg@24w_32h_1c_1e_2o.png",
draggable: false
});
}
}
}
}
window.onload = myLoad;
</script>
<style>
#map {
width: 500px;
height: 400px;
float: left;
}
</style>
</head>
<div id="map"></div>
<apex:form id="form">
<apex:pageBlock id="pageBlock1">
<apex:inputHidden id="hidden" value="{!hidden}"/>
<apex:pageBlockSection >
<apex:pageBlockSectionItem >
<apex:outputLabel value="災害ID">
<apex:inputText value="{!saigaiCode}" id="a"/>
</apex:outputLabel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel value="状態">
<apex:inputText value="{!JotaiCode}" id="b"/>
</apex:outputLabel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel value="状態コード">
<apex:inputText value="{!JotCode}" id="c"/>
</apex:outputLabel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:commandButton value="検索" onclick="dosearch();" action="{!doIt}" />
</apex:pageBlock>
</apex:form>
</apex:page>
page
注意：在控制器里的SOQL语句中进行判断，页面上就不需要进行判断了
public with sharing class CL_MapDoSearchController {
public String saigaiCode{set;get;} // 災害ID
public String JotaiCode{set;get;} // 状態
public String JotCode{set;get;} // 状態コード
public boolean hidden{set;get;} // boolean
public CL_MapDoSearchController(){
hidden = false;
}
public void doIt(){ // 检索的条件
hidden = true;
}
@RemoteAction // 远程操作(Ajax响应),要想被调用，就得使用static修饰
/**
* 選択
*/
public static List<Accoun__c> selectList(String saigaiCode, String JotaiCode, String JotCode) {
list<Accoun__c> accounList = new list<Accoun__c>();
String strSql = ' ';
String strWhere = ' where ';
// 取得項目：
strSql +='SELECT ';
// Id,
strSql +='Id, ';
//経度(location__Longitude__s),
strSql +='location__Longitude__s, ';
//緯度(location__Latitude__s),
strSql +='location__Latitude__s ';
// オブジェクト： (Accoun__c)
strSql +='FROM ';
strSql +='Accoun__c ';
// 在控制器进行判断，页面就不需要判断
if (String.isNotEmpty(saigaiCode)) {
// 災害ID(SaigaiId__c)
strWhere = strWhere + ' SaigaiId__c = :saigaiCode AND ';
}
if (String.isNotEmpty(JotaiCode)) {
// 状態(Jotai__c)
strWhere = strWhere + 'Jotai__c =:JotaiCode AND ';
}
if (String.isNotEmpty(JotCode)) {
// 状態コード(JotaiCode__c)
strWhere = strWhere + 'JotaiCode__c =:JotCode AND ';
}
if(strWhere != ' where '){
strSql = strSql + strWhere.removeEnd('AND ');
}
// ソート
strSql +=' order by ';
// 支社コード,営業所コード,係コード,班コード
strSql +=' location__Longitude__s, location__Latitude__s ';
accounList = Database.query(strSql);
return accounList;
}
}
class
反省：对于加载页面的初期显示和检索之后的显示，我有点小挫折，因为我的页面加载后初期显示和检索是一样的，最后是用到boolean来判断指定才解决。
page：
var hidden = document.getElementById("{!$Component.form.pageBlock1.hidden}").value;
if(hidden == "true"){
dosearch();
}
<apex:inputHidden id="hidden" value="{!hidden}"/>
<apex:pageBlockSection >
class：
public boolean hidden{set;get;} // boolean
public CL_MapDoSearchController(){
hidden = false;
}
public void doIt(){ // 检索的条件
hidden = true;
}
检索Google Maps地图位置（小训练）的更多相关文章
- 【Silverlight】Bing Maps学习系列（八）：使用Bing Maps Silverlight Control加载自己部署的Google Maps
[Silverlight]Bing Maps学习系列(八):使用Bing Maps Silverlight Control加载自己部署的Google Maps 上个月微软必应地图(Bing Maps) ...
- Google Maps API显示地图的小示例
来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...
- Google Map API抓取地图坐标信息小程序
因为实验室需要全国城市乡镇的地理坐标,有Execl的地名信息,需要一一查找地方的经纬度.Google Map地图实验室提供自带的查找经纬度的方法,不过需要一个点一个点的手输入,过于繁琐,所以自己利用G ...
- google maps js v3 api教程(2) -- 在地图上添加标记
原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...
- google maps js v3 api教程(1) -- 创建一个地图
原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...
- Google Maps瓦片(tile)地图文件下载(1-11层级)
整理硬盘时,发现一份去年下载的谷歌地图瓦片文件,整理并分享给大家. 地图来源:Google Maps(应该是国内谷歌地图) 采集时间:2017年6月 采集范围:0-6层级世界范围:7-11层级中国范围 ...
- [转]MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite
MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...
- 谷歌地图，国内使用Google Maps JavaScript API，国外业务
目前还是得墙 <!DOCTYPE html> <html> <head> <meta name="viewport" content=&q ...
- 如何插入谷歌地图并获取javascript api 秘钥--Google Maps API error: MissingKeyMapError
参考:https://blog.csdn.net/klsstt/article/details/51744866 Google Maps API error: MissingKeyMapError h ...
随机推荐
- Apache2.4：AH01630 client denied by server configuration
问题说明:Apache服务总共有4个,是为了防止单点故障和负载均衡,负载均衡控制由局方的F5提供. 访问的内容在NAS存储上,现象是直接访问每个apache的服务内容都是没有问题,但是从负载地址过来的 ...
- BZOJ 1006 【HNOI2008】 神奇的国度
题目链接:神奇的国度 一篇论文题--神奇的弦图,神奇的MCS-- 感觉我没有什么需要多说的,这里简单介绍一下MCS: 我们给每个点记录一个权值,从后往前依次确定完美消除序列中的点,每次选择权值最大的一 ...
- ReactNative入门（安卓）——API（上）
Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, C ...
- 2000条你应知的WPF小姿势 基础篇<57-62 依赖属性进阶>
在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...
- egret调用页面js的方法。
参考文献: http://bbs.egret-labs.org/thread-267-3-1.html http://docs.egret-labs.org/post/manual/threelibs ...
- 7. SVM松弛变量
我们之前讨论的情况都是建立在样例线性可分的假设上,当样例线性不可分时,我们可以尝试使用核函数来将特征映射到高维,这样很可能就可分了.然而,映射后我们也不能100%保证可分.那怎么办呢,我们需要将模型进 ...
- 从零开始编写自己的C#框架（15）——Web层后端登陆功能
对于一个后端管理系统,最重要内容之一的就是登陆页了,无论是安全验证.用户在线记录.相关日志记录.单用户或多用户使用帐号控制等,都是在这个页面进行处理的. 1.在解决方案中创建一个Web项目,并将它设置 ...
- webpack配置别名alias出现的错误匹配
@(webpack) webpack是一款功能强大的前端构建工具,不仅仅是针对js,它也可通过各种loader来构建相关的less,html,image等各种资源,将webpack配合流程制定工具gu ...
- 应用层之E-mail服务及javaMail邮件发送的知识总结
关于Email服务你需要知道的知识点: 概述: 今天来介绍一下应用层的电子邮件服务,我们每天几乎都在用,电子邮件(email)服务也是一种基于C/S模式的服务,它采用的是一种"存储-转发&q ...
- Ionic2系列——Ionic 2 Guide 官方文档中文版
最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时 ...