谷歌地图，多个地图中的多个标记 [英] Multiple markers in google maps, multiple maps

问题描述

我试图在同一个页面中构建2个Google地图。其中一个地图有几个标记...

 函数initializeMap（）{
 
 
 
 var locations = [
 ['PARIS  -  FRANCE'，485.810,2.2629]，
 ['PARIS  -  FRANCE'，49.046,2.330]，
 ['PARIS  -  FRANCE '，48.4331,2.2134]，
 ['PALERMO  -  ITALY'，38.1033,1.3527]，
 ['ROME  -  ITALY'，41.4846,1.21511] 
]; 
 
 
 
 
 
 var lat = '48 .900401'; 
 var lon ='2.231761'; 
 
 
 var contentString ='< p style =color：＃8fd522; font-weight：bold;> XXX< / p>'; 
 
 
 
 var centerLon = lon  -  0.0105; 
 
 var myOptions = {
 scrollwheel：false，
 draggable：false，
 disableDefaultUI：true，
 center：new google.maps.LatLng（lat ，centerLon），
 zoom：15，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 //将地图绑定到带有id的元素map-canvas 
 var map = new google.maps.Map（document.getElementById（'map-canvas'），myOptions）; 
 var marker = new google.maps.Marker（{
 map：map，
 position：new google.maps.LatLng（lat，lon），
 title：'XXX' 
}）; 
 
 var infowindowW = new google.maps.InfoWindow（{
 content：contentString 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindowW.open（map，marker）; 
}）; 
 
 infowindowW.open（map，marker）; 
 
 var myOptions = {
 scrollwheel：true，
 draggable：true，
 disableDefaultUI：false，
 center：new google.maps.LatLng（66.6846 ，-67.21511），
 zoom：2.82，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 
 var map2 = new google.maps.Map（document.getElementById（'map-canvas-net'），myOptions）; 
 var i; 
 for（i = 0; i< locations.length; i ++）{
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（locations [ i] [1]，locations [i] [2]），
 map：map2，
 title：locations [i] [0] 
}）; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：locations [i] [0] 
}）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（locations [i ]; [b] b $ b infowindow.open（map2，marker）; 
} 
}）（marker，i））; 
 
 
  

map2的标记不可点击... I尝试在循环中执行 marker [i] ，但它使代码无效（ window.initializeMap 不是 ）

任何想法？ p>缩放是一个整数。出于某种原因，这：

 缩放：2.82，
  

会导致问题。将其更改为 2 和它的工作原理 。

代码段：

function initializeMap（）{var locations = [[ '巴黎 - 法国'，48.810,2.2629]，['巴黎 - 法国'，49.046,2.330]，['巴黎 - 法国'，48.4331,2.2134]，['巴勒斯坦 - 意大利'，38.1033,1.33527] - 意大利'，41.4846，1.21511]]; var lat = '48 .900401'; var lon ='2.231761'; var contentString ='< p style =color：＃8fd522; font-weight：bold;> XXX< / p>'; var centerLon = lon - 0.0105; var myOptions = {scrollwheel：false，draggable：false，disableDefaultUI：true，center：new google.maps.LatLng（lat，centerLon），zoom：15，mapTypeId：google.maps.MapTypeId.ROADMAP}; //将地图绑定到带有id的元素map-canvas var map = new google.maps.Map（document.getElementById（'map-canvas'），myOptions）; var marker = new google.maps.Marker（{map：map，position：new google.maps.LatLng（lat，lon），title：'XXX'}）; var infowindowW = new google.maps.InfoWindow（{content：contentString}）; google.maps.event.addListener（marker，'click'，function（）{infowindowW.open（map，marker）;}）; infowindowW.open（map，marker）; var myOptions2 = {scrollwheel：true，draggable：true，disableDefaultUI：false，center：new google.maps.LatLng（66.6846，-67.21511），zoom：2，mapTypeId：google.maps.MapTypeId.ROADMAP}; var map2 = new google.maps.Map（document.getElementById（'map-canvas-net'），myOptions2）; var i;对于（i = 0; i< locations.length; i ++）{var marker2 = new google.maps.Marker（{position：new google.maps.LatLng（locations [i] [1]，locations [i] [2 ]），map：map2，title：locations [i] [0]}）; var infowindow2 = new google.maps.InfoWindow（{content：locations [i] [0]}）; google.maps.event.addListener（marker2，'click'，（function（marker2，i）{return function（）{infowindow2.setContent（locations [i] [0]）; infowindow2.open（map2，marker2）;} ;}）（marker2，i））; }} google.maps.event.addDomListener（window，'load'，initializeMap）;

  html，body，＃map-canvas，＃map-canvas-net {height：500px;宽度：500px; margin：0px; < script src =https：//   

I'm trying to built 2 google maps in a same page. One of those maps has several markers...

function initializeMap() {



    var locations = [
        ['PARIS - FRANCE', 485.810,2.2629],
        ['PARIS - FRANCE', 49.046,2.330],
        ['PARIS - FRANCE', 48.4331,2.2134],
        ['PALERMO - ITALY', 38.1033,1.3527],
        ['ROME - ITALY', 41.4846,1.21511]
    ];





var lat = '48.900401'; 
var lon = '2.231761'; 


var contentString = '<p style="color:#8fd522; font-weight: bold;">XXX</p>';



var centerLon = lon - 0.0105;

var myOptions = {
    scrollwheel: false,
    draggable: false,
    disableDefaultUI: true,
    center: new google.maps.LatLng(lat, centerLon),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

//Bind map to elemet with id map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(lat, lon),
    title: 'XXX'
});

var infowindowW = new google.maps.InfoWindow({
  content: contentString
});

google.maps.event.addListener(marker, 'click', function () {
    infowindowW.open(map, marker);
});

infowindowW.open(map, marker);

var myOptions = {
    scrollwheel: true,
    draggable: true,
    disableDefaultUI: false,
    center: new google.maps.LatLng(66.6846, -67.21511),
    zoom: 2.82,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};


var map2 = new google.maps.Map(document.getElementById('map-canvas-net'), myOptions);
var i;
for (i = 0; i < locations.length; i++) {  
    var marker = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map2,
         title: locations[i][0]
    });

    var infowindow = new google.maps.InfoWindow({
      content: locations[i][0]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
             infowindow.setContent(locations[i][0]);
             infowindow.open(map2, marker);
         }
    })(marker, i));
}
}

The markers of map2 are not clickable...I tried to do marker[i] in the loop but it just make the code invalid (window.initializeMap is not a function)

Any idea?

解决方案

Zoom is an integer. For some reason, this:

   zoom: 2.82,

causes the problem. Change that to 2 and it works.

code snippet:

function initializeMap() {
  var locations = [
    ['PARIS - FRANCE', 48.810, 2.2629],
    ['PARIS - FRANCE', 49.046, 2.330],
    ['PARIS - FRANCE', 48.4331, 2.2134],
    ['PALERMO - ITALY', 38.1033, 1.3527],
    ['ROME - ITALY', 41.4846, 1.21511]
  ];

  var lat = '48.900401';
  var lon = '2.231761';
  var contentString = '<p style="color:#8fd522; font-weight: bold;">XXX</p>';
  var centerLon = lon - 0.0105;
  var myOptions = {
    scrollwheel: false,
    draggable: false,
    disableDefaultUI: true,
    center: new google.maps.LatLng(lat, centerLon),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  //Bind map to elemet with id map-canvas
  var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(lat, lon),
    title: 'XXX'
  });

  var infowindowW = new google.maps.InfoWindow({
    content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindowW.open(map, marker);
  });

  infowindowW.open(map, marker);

  var myOptions2 = {
    scrollwheel: true,
    draggable: true,
    disableDefaultUI: false,
    center: new google.maps.LatLng(66.6846, -67.21511),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  var map2 = new google.maps.Map(document.getElementById('map-canvas-net'), myOptions2);
  var i;
  for (i = 0; i < locations.length; i++) {
    var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map2,
      title: locations[i][0]
    });

    var infowindow2 = new google.maps.InfoWindow({
      content: locations[i][0]
    });

    google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
      return function() {
        infowindow2.setContent(locations[i][0]);
        infowindow2.open(map2, marker2);
      };
    })(marker2, i));
  }
}
google.maps.event.addDomListener(window, 'load', initializeMap);

html,
body,
#map-canvas,
#map-canvas-net {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="map-canvas-net" style="border: 2px solid #3872ac;"></div>

这篇关于谷歌地图，多个地图中的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！