javascript - 为列表 Google map 中的每个纬度、经度创建一个标记

Question

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

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

位置列表看起来像这样:"[{"Lat":"34.163291","Lng":"-118.685123"},{"Lat":"38.91992","Lng":"-76.992757"},{"Lat":"39.309265","Lng":"-76.749287"},{"Lat":"40.658113","Lng":"-74.005874"},{"Lat":"33.837814","Lng":"-117.886568"}]".. ....(长字符串)

对于这个字符串中的每个纬度，经度，我想创建一个标记并将其显示在 map 上希望有人可以帮助我。

它还会影响 map 加载的速度吗？？一次加载一堆标记时!

JS 函数:

            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

您的问题是您要遍历位置列表，为每个位置创建一张新 map 。 200 个标记没问题，但 200 个 map 不是很好。将创建 map 的代码移到循环之外:

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

这里唯一的问题是您必须为您的 map 选项提供纬度/经度，而您还没有。添加标记后，您可以使用多种巧妙的方法来执行此操作，或者您可能已经知道可以使用的纬度/经度。