检索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 4199: [Noi2015]品酒大会 [后缀数组 带权并查集]
4199: [Noi2015]品酒大会 UOJ:http://uoj.ac/problem/131 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 ...
- Jquery对网页高度、宽度的操作
Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...
- MVC5在Mono上的各种坑
买了Macbook后,各种事情的纠缠,都没好好地用过OSX系统. 果断的装上了xcode和mono,还有monodevelop. 然后把项目移植到mono上运行,各种问题. 然后第一个问题来了 权限不 ...
- Hadoop3 在eclipse中访问hadoop并运行WordCount实例
前言: 毕业两年了,之前的工作一直没有接触过大数据的东西,对hadoop等比较陌生,所以最近开始学习了.对于我这样第一次学的人,过程还是充满了很多疑惑和不解的,不过我采取的策略是还是先让环 ...
- 使用Masstransit开发基于消息传递的分布式应用
Masstransit作为.Net平台下的一款优秀的开源产品却没有得到应有的关注,这段时间有机会阅读了Masstransit的源码,我觉得我有必要普及一下这个框架的使用. 值得一提的是Masstran ...
- Unit Of Work的设计
在DDD开发过程中,一个良好的Uow设计必不可少,我心目中的Uow设计应该具备以下几点: 1.有着良好的抽象,有着恰如其分的命名: 2.能够应付不同的组件,比如你的系统中可能会存在EfUnitOfWo ...
- 【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- Lesson 23 A new house
Text I had a letter from my sister yesterday. She lives in Nigeria. In her letter, she said that she ...
- 在 Ubuntu 14.10 中借用 Windows 的字体
在前一篇随笔中,我详细讨论了字体的分类及用途,也以 Fedora 20 为例,展示了字体配置的思路和方法.我在配置 Fedora 20 系统字体的时候,采用的是一种釜底抽薪的方法,完全抛开了系统原有的 ...
- 使用tornado，我们可以做什么？
以下介绍都是建立在python2.x的基础上面,tornado使用任意版本皆可. 如果我们需要对外提供一个http server(web api)/websocket server时,我们都可以使用t ...