使用 JavaScript 代码在 Google 地图中添加更多具有不同位置的标记

debugcn 发表于 Dev

斯坎

如何向我的谷歌地图添加更多位置，并让它们在每个不同位置获得相同的标记图标？

这是代码：

$(function() {
  function initMap() {
    var location = new google.maps.LatLng(50.0875726, 14.4189987);

    var mapCanvas = document.getElementById("map");
    var mapOptions = {
      center: location,
      zoom: 16,
      panControl: false,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);

    var markerImage = "marker.png";

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

    var contentString =
      '<div class="info-window">' +
      "<h3>Info Window Content</h3>" +
      '<div class="info-content">' +
      "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>" +
      "</div>" +
      "</div>";

    var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 400
    });

    marker.addListener("click", function() {
      infowindow.open(map, marker);
    });

    var styles = [
      {
        featureType: "landscape",
        stylers: [{ saturation: -100 }, { lightness: 65 }, { visibility: "on" }]
      },
      {
        featureType: "poi",
        stylers: [
          { saturation: -100 },
          { lightness: 51 },
          { visibility: "simplified" }
        ]
      },
      {
        featureType: "road.highway",
        stylers: [{ saturation: -100 }, { visibility: "simplified" }]
      },
      {
        featureType: "road.arterial",
        stylers: [{ saturation: -100 }, { lightness: 30 }, { visibility: "on" }]
      },
      {
        featureType: "road.local",
        stylers: [{ saturation: -100 }, { lightness: 40 }, { visibility: "on" }]
      },
      {
        featureType: "transit",
        stylers: [{ saturation: -100 }, { visibility: "simplified" }]
      },
      {
        featureType: "administrative.province",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "water",
        elementType: "labels",
        stylers: [
          { visibility: "on" },
          { lightness: -25 },
          { saturation: -100 }
        ]
      },
      {
        featureType: "water",
        elementType: "geometry",
        stylers: [{ hue: "#ffff00" }, { lightness: -25 }, { saturation: -97 }]
      }
    ];

    map.set("styles", styles);
  }

  google.maps.event.addDomListener(window, "load", initMap);
});

我将非常感谢您的帮助，我仍在学习中。

埃迪

您可以创建一个包含坐标（纬度和经度）的对象数组。使用forEach循环数组通，并作出标记。

var listOfLocations = [
  {lat: 18.906286,lng: 19.102439},      //Somewhere in Africa
  {lat: 8.331083,lng: 105.549002},      //Somewhere near Vietnam
  {lat: -27.440040,lng: 135.067341},    //Somewhere in Australia
  {lat: -14.338904,lng: -51.507365},    //Somewhere in Brazil
];

listOfLocations.forEach(function(o) {               //Loop thru the array
  var marker = new google.maps.Marker({             //Make the marker and add to the map
    position: o,
    map: map,
    icon: markerImage                               //Set image
  });
})

注意：无需new google.maps.LatLng按照Google Map Marker Doc制作对象

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。