检索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 ...
随机推荐
- BZOJ 3626: [LNOI2014]LCA [树链剖分 离线|主席树]
3626: [LNOI2014]LCA Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2050 Solved: 817[Submit][Status ...
- ubuntu进行子域名爆破
好记性不如烂笔头,此处记录一下,ubuntu进行子域名的爆破. 先记录一个在线的子域名爆破网址,无意中发现,很不错的网址,界面很干净,作者也很用心,很感谢. https://phpinfo.me/do ...
- 如何开启MySQL 5.7.12 的二进制日志
1. 打开/etc下的my.cnf文件 2. 编辑它,添加内容: log_bin=binary-log #二进制日志的文件名 server_id=1 #必须指定server_id,这是MySQL ...
- CentOS上 Mono 3.2.8运行ASP.NET MVC4经验
周一到周三,折腾了两天半的时间,经历几次周折,在小蝶惊鸿的鼎力帮助下,终于在Mono 3.2.8上运行成功MVC4.在此总结经验如下: 系统平台的版本: CentOS 6.5 Mono 3.2.8 J ...
- WCF : 如何将NetTcpBinding寄宿在IIS7上
摘要 : 从IIS 7 开始, IIS增加了对非HTTP协议的支持. 因此, 自IIS 7之后, 可以将NetTcpBinding等非HTTP协议的Bindings直接寄宿在IIS上面. 本文将介绍如 ...
- 更有效率的使用Visual Studio（二）
没想到上一篇文章有这么多人喜欢,多谢大家支持.继续- 很多比较通用的快捷键的默认设置其实是有一些缩写在里面的,这个估计也是MS帮助我们记忆.比如说注释代码的快捷键是Ctrl + E + C,我们如果知 ...
- 再次思考 classpath 环境变量 等
f:\aspectj1.8\lib\aspectjrt.jar;.;%JAVA_HOME%\lib;C:\Temp\IBM\SQLLIB\java\db2java.zip;C:\Temp\IBM\SQ ...
- Xshell生成密钥key（用于Linux 免密码登录）
- <a> href属性--记录八
1.去掉<a>标签的下划线 <ul style=" list-style-type:none; margin:0;color:Gray; font-size:11px;ma ...
- Python开发环境配置
好久没有写博客了,自从6月份毕业后,进入一家做书法.字画文化宣传的互联网公司(www.manyiaby.com),这段时间一直在进行前端开发,对于后端的使用很少了,整天都是什么html.css.jav ...