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

2024-05-17 • 问答

我正在使用以下代码在一个可以正常运行的网站上显示多个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);
 }

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

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,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,title: "Hello World! I'm in map1"
  });

  marker2Pos = new google.maps.LatLng(52.370216,4.895168);
  var marker2 = new google.maps.Marker({
    position: marker2Pos,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地图

yoyo520621 回答：页面上带有标记的多个Google地图

大家都在问