检索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 ...
随机推荐
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
- EMD分析 Matlab 精华总结 附开源工具箱（全）
前言: 本贴写于2016年12与15日,UK.最近在学习EMD(Empirical Mode Decomposition)和HHT(Hilbert-Huang Transform)多分辨信号处理,FQ ...
- 跟Unity3D学代码优化
今天我们来聊聊如何跟Unity学代码优化,准确地说,是通过学习Unity的IL2CPP技术的优化策略,应用到我们的日常逻辑开发中. 做过Unity开发的同学想必对IL2CPP都很清楚,简单地说,IL2 ...
- Team Leader 你不再只是编码, 来炖一锅石头汤吧
h3{ color: #000; padding: 5px; margin-bottom: 10px; font-weight: bolder; background-color: #ccc; } h ...
- 跟我一起hadoop（1）-hadoop2.6安装与使用
伪分布式 hadoop的三种安装方式: Local (Standalone) Mode Pseudo-Distributed Mode Fully-Distributed Mode 安装之前需要 $ ...
- C# BS消息推送 负载均衡-SignalR&Redis的配置（三）
1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 2. 负载均衡配置 配置很简单,只要在startup类中添加Redis的连接就OK. 1)首先,引 ...
- jQuery +ajax +json+实现分页
正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...
- salesforce 零基础学习（五十五）java通过SOAP方式定时访问某个文件然后插入到sObject中
项目源码:https://github.com/zhangyueqidlmu/SOAP-Access-SFDC.git 项目背景:salesforce端相关数据需要其他系统提供,其他系统可以提供相关数 ...
- VS2015企业版本（安装包+key）+ .NET Reflector 9.0
Reflector9.0系下载:https://yunpan.cn/cMQj9zWbffSqy 访问密码 55eb VS2015中文企业版: http://pan.baidu.com/s/1eRIo ...
- ASP.NET OWIN OAuth：refresh token的持久化
在前一篇博文中,我们初步地了解了refresh token的用途——它是用于刷新access token的一种token,并且用简单的示例代码体验了一下获取refresh token并且用它刷新acc ...