检索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;
     }