页面上有标记的多个Google地图

Question

我正在使用以下代码在一个可以正常运行的网站上显示多个Google Maps。但是我正在努力在每个地图的LatLng位置添加一个标记。

<div id="block-wrp">
<div class="block-item">
<div id="mapCanvas1" class="map-item"> </div>
<span class="city-name">London</span> </div>
<div class="block-item">
<div id="mapCanvas2" class="map-item"> </div>
<span class="city-name">Amsterdam</span> </div>
</div>

<script type="text/javascript">
var map1, map2;
function drawMap() {

    var mapOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      fullscreenControl: false 
     }
    mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
    map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

    mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
    map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);
 }

Answer 1

对于每个标记，只需在地图属性中添加适当的地图对象值

function drawMap() {

    var mapOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      fullscreenControl: false 
     }
    mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
    map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

    mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
    map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);


    marker1Pos =   new google.maps.LatLng(51.509865, -0.118092);
    var marker1 = new google.maps.Marker({
    position: marker1Pos,
    map: map1,
    title: "Hello World! I'm in map1"
  });

    marker2Pos =  new google.maps.LatLng(52.370216, 4.895168);
    var marker2 = new google.maps.Marker({
    position: marker2Pos,
    map: map2,
    title: "Hello World! I'm in map2"
  });
 }

代码段：

function drawMap() {

  var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    fullscreenControl: false
  }
  mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
  map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

  mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
  map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);


  marker1Pos = new google.maps.LatLng(51.509865, -0.118092);
  var marker1 = new google.maps.Marker({
    position: marker1Pos,
    map: map1,
    title: "Hello World! I'm in map1"
  });

  marker2Pos = new google.maps.LatLng(52.370216, 4.895168);
  var marker2 = new google.maps.Marker({
    position: marker2Pos,
    map: map2,
    title: "Hello World! I'm in map2"
  });
}

.map {
  height: 300px;
  width: 400px;
  border: solid black 1px;
}

<div id="mapCanvas1" class="map"></div>
<div id="mapCanvas2" class="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=drawMap" async defer></script>