页面上有多个 Google 个带有标记的地图
Multiple Google Maps on page with markers
我正在使用以下代码在网站上显示多个 Google 地图,该代码运行正常。但是我正在努力为每张地图上的 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);
}
对于每个标记,只需在地图中添加适当的地图对象值 属性
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>
我正在使用以下代码在网站上显示多个 Google 地图,该代码运行正常。但是我正在努力为每张地图上的 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);
}
对于每个标记,只需在地图中添加适当的地图对象值 属性
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>