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

Question

如何向我的 google 地图添加更多位置，并让它们在每个不同的位置都有相同的标记图标？

代码如下：

$(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

创建new google.maps.LatLng对象

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

Add more markers with different location in Google maps in JavaScript code

html

javascript

location

google-maps

marker