Question

我在Google地图中创建标记时遇到问题。

我在JS中有一个获取长字符串的函数

locationlist看起来像这样： “[{” 纬度 “：” 34.163291" ， “LNG”： “ - 118.685123”}，{ “纬度”： “38.91992”， “LNG”： “ - 76.992757”}，{ “纬度”： “39.309265”，” Lng“：” - 76.749287“}，{”Lat“：”40.658113“，”Lng“：” - 74.005874“}，{”Lat“：”33.837814“，”Lng“：” - 117.886568“}]”.. .... （长串）

对于此字符串中的每个Lat，Lng，我想创建一个标记并将其显示在地图上希望有人可以帮助我。

它是否会影响地图加载的速度？当一次装入一堆标记时！

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");
}

这里唯一的问题是你必须给你的地图选项一个lat / lng，你还没有。添加标记后，您可以使用各种聪明的方法，或者您可能已经知道可以使用的纬度/经度。

Answer 2

来自Google Maps docs

以下字段特别重要，通常在构建标记时设置：


position（必需）指定标识标记初始位置的LatLng。

map（可选）指定放置标记的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 data = markers [i]; ......

所以数据中的markers [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允许线程..

在Google地图列表中为每个纬度创建一个标记

3 个答案: