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

Question

这个问题已经有答案了:

Google Maps JS API v3 - Simple Multiple Marker Example (15 个回答)

已关闭 4 年前。

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

代码如下:

$(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);
});

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

Answer 1

您可以创建包含坐标(纬度和经度)的对象数组。使用 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
  });
})

注意:无需按照Google Map Marker Doc创建新的google.maps.LatLng对象