检索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 ...
随机推荐
- 【QQ红包】手机发抢不到的口令红包
这方法95%的人都抢不了 在QQ输入框输入一个表情,例如:阴险那个表情 将表情剪切到口令红包的口令里 这时候口令里的那个表情表情变成了符号 将符号删去一格,然后全选.复制 然后返回到QQ输入框粘贴 然 ...
- Xamarin.Android广播接收器与绑定服务
一.前言 学习了前面的活动与服务后,你会发现服务对于活动而言似乎就是透明的,相反活动对于服务也是透明的,所以我们还需要一中机制能够将服务和活动之间架起一座桥梁,通过本节的学习,你将会学到广播与绑定服务 ...
- .Net中的AOP系列之《间接调用——拦截方法》
返回<.Net中的AOP>系列学习总目录 本篇目录 方法拦截 PostSharp方法拦截 Castle DynamicProxy方法拦截 现实案例--数据事务 现实案例--线程 .Net线 ...
- Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
- K-近邻算法（KNN）
简介 k近邻算法是数据分类一种常用的算法,属于监督学习算法的一类,它采用不同特征值之的距离进行分类.K近邻算法具有精度高.对异常值不敏感.无数据输入假定的优点,缺点是计算复杂度高.空间复杂度高.适用于 ...
- 探索C#之系列目录导航
1. 探索c#之函数创建和闭包 2. 探索c#之尾递归编译器优化 3. 探索c#之不可变数据类型 4. 探索c#之递归APS和CPS 5. 探索c#之一致性Hash详解 6. 探索c#之微型MapRe ...
- 周六搞事情，微信小程序开发文档已放出！
程序员们,你们有事干了! 个人感觉不管是什么形式的UI技术,都无法决定一个产品的生死,核心还是服务和模式的创新. 某些方面和ApiCloud好像,但发展前景远远胜过ApiCloud. 微信小程序可以为 ...
- 【饿了么】招聘Java开发工程师、架构师
3年以上实际工作经验,本科及以上学历. 具有良好的编程基础( 比如熟悉HTTP.多线程.Socket.JVM.基本的数据结构和算法等). 熟悉Java语言以及相关的服务器(比如Tomcat).工具(M ...
- python property理解
一般情况下我这样使用property: @property def foo(self): return self._foo # 下面的两个decrator由@property创建 @foo.sette ...
- 【Win 10 应用开发】三维变换
所谓三维变换,其实是在二维平面上产生三维的视觉效果.前面老周简单提了一下透视效果,如果透视效果不能满需求,那可以考虑用三维变换. UIElement类有一个属性叫Transform3D,它定义的类型为 ...