Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/461.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
在JavaScript代码中的Google maps中添加更多具有不同位置的标记_Javascript_Html_Google Maps_Location_Marker - Fatal编程技术网

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

在JavaScript代码中的Google maps中添加更多具有不同位置的标记,javascript,html,google-maps,location,marker,Javascript,Html,Google Maps,Location,Marker,我怎样才能在我的谷歌地图中添加更多的位置,并让它们在每个不同的位置都有相同的标记图标 代码如下: $(function() { function initMap() { var location = new google.maps.LatLng(50.0875726, 14.4189987); var mapCanvas = document.getElementById("map"); var mapOptions = { center: locati

我怎样才能在我的谷歌地图中添加更多的位置,并让它们在每个不同的位置都有相同的标记图标

代码如下:

$(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);
});
$(函数(){
函数initMap(){
var location=new google.maps.LatLng(50.0875726,14.4189987);
var mapCanvas=document.getElementById(“map”);
变量映射选项={
中心:位置,
缩放:16,
泛控制:错误,
滚轮:错误,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(mapCanvas,mapOptions);
var markerImage=“marker.png”;
var marker=new google.maps.marker({
位置:位置,,
地图:地图,
图标:markerImage
});
var contentString=
'' +
“信息窗口内容”+
'' +
“佩伦特斯克居住者莫比·特里斯蒂克·塞内特斯和马莱苏达是著名的埃吉斯塔斯。前庭侵权者码头、封建主义者码头、特权者码头、临时住所码头、ante。不要让欧盟自由者坐在埃吉斯塔斯码头上。我的特权者码头是莫里斯·普莱弗德·利弗德·利奥。

”+ "" + ""; var infowindow=new google.maps.infowindow({ content:contentString, 最大宽度:400 }); marker.addListener(“单击”,函数(){ 信息窗口。打开(地图、标记); }); 变量样式=[ { 特色类型:“景观”, 样式器:[{饱和度:-100},{亮度:65},{可见性:“on”}] }, { 特征类型:“poi”, 样式:[ {饱和:-100}, {亮度:51}, {可见性:“简化”} ] }, { 功能类型:“道路。公路”, 样式器:[{saturation:-100},{visibility:“simplified”}] }, { 功能类型:“道路.干线”, 样式器:[{饱和度:-100},{亮度:30},{可见性:“on”}] }, { featureType:“road.local”, 样式器:[{饱和度:-100},{亮度:40},{可见性:“on”}] }, { 功能类型:“运输”, 样式器:[{saturation:-100},{visibility:“simplified”}] }, { featureType:“行政省”, 样式器:[{可见性:“关闭”}] }, { 特色类型:“水”, elementType:“标签”, 样式:[ {可见性:“}”, {亮度:-25}, {饱和度:-100} ] }, { 特色类型:“水”, elementType:“几何体”, 样式器:[{色调:{ffff00},{亮度:-25},{饱和度:-97}] } ]; map.set(“样式”,样式); } google.maps.event.addDomListener(窗口“加载”,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
  });
})

注意:无需制作
新的google.maps.LatLng
对象,根据

我很抱歉这么麻烦,你能告诉我代码作为一个整体是什么样子的吗?我是新的,无法完全理解如何修复它。你可以复制代码并粘贴到地图后。这些地点分散在世界各地。您可能需要缩小以查看所有标记@请再说一遍,但是我应该把你慷慨提供的新位置放在哪里?我试过了,但地图没有显示。地图显示没有新代码吗?是的,它显示了,并且显示了这个位置“var location=new google.maps.LatLng(50.0875726,14.4189987);”“用它的记号笔。