在列表中爲每個經緯度創建一個標記谷歌地圖

Question

我在創建Google地圖中的標記時遇到問題。

我有一個函數在JS是讓長串

locationlist看起來像： 「[{」 緯度 「：」 34.163291" ， 「LNG」： 「 - 118.685123」}，{」緯度 「：」 38.91992" ， 「LNG」： 「 - 76.992757」}，{ 「緯度」： 「39.309265」， 「LNG」： 「 - 76.749287」}，{ 「緯度」： 「40.658113」， 「LNG」：」 -74.005874 「}，{」 緯度 「：」 33.837814" ， 「LNG」： 「 - 117.886568」}]」 ...... （長串）

對於每個緯度，經度在這個字符串我想創建一個標記並將其顯示在地圖上 希望有人能幫助我那個。

它也會影響地圖加載的速度嗎？當一次加載一堆標記！

JS Funcation：

  var locationObj; 
    var historyObj; 



    function setMap(locationList) { 
     // List of Lat,Lng 
     locationObj = $.parseJSON(locationList); 
     //Looping through the Object 
     for (i in locationObj) { 
      var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]); 

      // Getting the Lat,Lng frmo the object 
      var hItem = locationObj[i]; 
      var qLat = parseFloat(hItem["Lat"]); 
      var qLong = parseFloat(hItem["Lng"]); 


      var qMapTypeId = google.maps.MapTypeId.SATELLITE 


      var myLatlng; 
      if (qLat != 0 && qLong != 0) { 
      myLatlng = new google.maps.LatLng(qLat, qLong); 
       mapOptions = { 
        zoom: 1, 
        center: myLatlng, 
        mapTypeControl: true, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
        } 
       } 


       map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 



       map.setTilt(45); 
       map.setHeading(0); 
       map.setMapTypeId(qMapTypeId); 

      var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map 

       }); 

       google.maps.event.addListener(marker, "click", function (event) { 

       }); 
       } 

     } 
     $("#map-canvas").show(); 
     $("#divLoadingMessageMap").css("display", "none"); 
    } 

Answer 1

您的問題是你在你的循環地點列表，爲每個地圖創建一個新地圖。 200個標記是沒有問題的，但是200個地圖不是很好。移動代碼創建地圖的循環之外：

function setMap(locationList) { 
    locationObj = $.parseJSON(locationList); 
    var qMapTypeId = google.maps.MapTypeId.SATELLITE 

    mapOptions = { 
     zoom: 1, 
     center: myLatlng, // this line won't work yet 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     } 
    } 


    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    map.setTilt(45); 
    map.setHeading(0); 
    map.setMapTypeId(qMapTypeId); 

    for (i in locationObj) { 
     var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]); 

     var hItem = locationObj[i]; 
     var qLat = parseFloat(hItem["Lat"]); 
     var qLong = parseFloat(hItem["Lng"]); 

     var myLatlng; 
     if (qLat != 0 && qLong != 0) { 
      myLatlng = new google.maps.LatLng(qLat, qLong); 


      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map 
      }); 

      google.maps.event.addListener(marker, "click", function(event) { 

      }); 
     } 

    } 
    $("#map-canvas").show(); 
    $("#divLoadingMessageMap").css("display", "none"); 
} 

這裏唯一的問題是，你將不得不放棄一個緯度/經度到地圖選項，你還沒有的。在添加標記之後，您可以使用各種巧妙的方法，或者您可能已經知道可以使用的緯度/經度。

Answer 2

從Google Maps docs

以下字段是特別重要的，構建一個標記時進行設置：

1. 位置（必需）指定一個經緯度識別標記的初始位置。
2. map（可選）指定放置標記的地圖。 如果您未指定構建標記的地圖，則會創建標記但未附加到（或顯示在）地圖上。稍後可以通過調用標記的setMap（）方法來添加標記。

所以，你應該設置你的地圖變量在創建你的標記創建標記，然後之前，而不是

marker = new google.maps.Marker({ 
      position: myLatlng 
      }); 

做

marker = new google.maps.Marker({ 
      position: myLatlng 
      map: map 
      }); 

Answer 3

我有一個答案..在這個問題上：Multiple markers and infowindows on Google Maps (using MySQL)

var lis_marker = new Array(); 
    for (i = 0; i < locationObj.length; i++) { 
     var hItem = locationObj[i]; 

     lis_marker[i] = new google.maps.Marker({ 
       map: map, 
       position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"]), 
       title: 'Marker'; 
     }); 
    } 

在這段代碼中你可以看到VAR數據=標記[I] ...

所以標記[i]於你的數據是JSON

var hItem = locationObj[i]; 
var marker = new google.maps.Marker({ 
     title: 'marker ', 
     animation: google.maps.Animation.DROP, 
     position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"]) 
}); 

的陣列試試這個，我希望它幫

，或者如果你不想使用數組保存數組符號......你可以試試這個代碼

for (i = 0; i < locationObj.length; i++) { 
     var hItem = locationObj[i]; 
     (function(hItem){ 
     lis_marker = new google.maps.Marker({ 
       map: map, 
       position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"]), 
       title: 'Marker'; 
     }); 
     })(hItem); 
    } 

jQuery的允許線程..