名称:检索地图位置
内容:地图初期显示和检索显示
功能:根据条件检索地图的经度与纬度
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; }