使用google map v3新增經緯度資訊

ztguang發表於2016-03-30
http://s8186255.iteye.com/blog/758678

     V3版的Google map,從提供的程式碼結構而言,更加模組化,鏈式操作的感覺也不錯,關鍵代表了未來,所以掌握其使用方法自然 重要。

    與地圖相關的應用開發中,常用的技術是將經緯度錄入到後臺庫中,顯示的時候,讀出經緯度,通過google提供的js,將你關注的點在地圖上畫出來。或者可以畫出更多的東西,比如線、多邊形。

    以往基於專業地圖系統如mapinfo、esri、中地地圖系統等開發應用軟體,面臨的最大問題是地圖資訊的更新,基於google map這個雲端計算平臺,一切擔憂可以消解。

    廢話少說,現在舉一個簡單的例子:當我們點選地圖的時候,可以獲取經緯度資訊,並錄入到後臺系統中。比如我們將一個照片放在地圖的某個點,就需要如此的應用。

js準備,準備好jquery和google的js;


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


html準備;


       


       
       

.....


前面的div是地圖的顯示位置大小;

客戶化的js程式碼準備:主要解決頁面載入幹什麼、點選地圖幹什麼的問題;

//放置marker
  function placeMarker(location) {
    var clickedLocation = new google.maps.LatLng(location);
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markersArray.push(marker);

//這裡根據使用者操作,將經緯度取出來,並複製到input中。
    $("#geo-lat").val(marker.getPosition().lat());
    $("#geo-lng").val(marker.getPosition().lng());

  };

//清除marker,這個函式需要使用,不然你的滑鼠點選之處,都有標記,而你只需要一個。
   function clearMarkersBefore() {
    if (markersArray) {
      for (i in markersArray) {
        markersArray[i].setMap(null);
      }
      markersArray.length = 0;
    }
  };


//這以下是載入頁面要做的事情:初始化,同時在地圖上增加一個事件;
  $(function(){
    //初始化地圖
    mapInit();
    google.maps.event.addListener(map, 'click', function(event) {
      clearMarkersBefore();
      placeMarker(event.latLng);
    });
  });

後面兩個是經緯度;

後臺準備;

這裡可以使用任何後臺程式,獲取兩個hidden input的值,進行後期處理即可。


提示:

1、在實現的過程中,與v2不同的是對點選地圖形成多個marker的處理,最終發現這種採用陣列的處理方式最好。

2、我的後臺是rails,我還是堅持我的觀點,rails開發應用在開發的時候,介面方面要減少個性化的東西,比如rjs、比如支援google map ym4r等外掛,直接使用javascript(jquery)。
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
閱讀(2136) | 評論(0) | 轉發(0) |
給主人留下些什麼吧!~~
評論熱議

相關文章