页面上有多个带有标记的谷歌地图

Question

我使用以下代码在一个网站上显示多个谷歌地图，这是正确的。但我正在努力为每张地图上的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>