仅在具有多个地图的网络上的最后一张地图上显示地图标记[关闭]答案

【问题标题】：Only showing map markers on the last map from a web with multiple maps [closed]仅在具有多个地图的网络上的最后一张地图上显示地图标记[关闭]
【发布时间】：2021-02-02 09:16:27
【问题描述】：

我正在开发一个包含餐馆列表的网站。

每家餐厅都有一张地图，在其位置上显示一个标记。

我正在使用以下脚本来显示每个餐厅的地图：

<!--Google map-->
                     
                     <div id="googleMap<?php echo $id ?>" style="width:100%;height:200px;"></div>

                     <script>
                      function myMap<?php echo $id ?>() {
                        var mapProp<?php echo $id ?>= {
                          center:new google.maps.LatLng(<?php echo $latitud?>,<?php echo $longitud?>),
                          zoom:5,
                        };
                        var map<?php echo $id ?> = new google.maps.Map(document.getElementById("googleMap<?php echo $id ?>"),mapProp<?php echo $id ?>);

                        var goldenGatePosition<?php echo $id ?> = {lat: <?php echo $latitud?>,lng: <?php echo $longitud?>};
                        var marker<?php echo $id ?> = new google.maps.Marker({
                          position: goldenGatePosition<?php echo $id ?>,
                          map: map<?php echo $id ?>,
                          title: '<?php echo $nombre ?>'
                        });
                      }


                    </script>

                    <script src="https://maps.googleapis.com/maps/api/js?key=.....api key comes here....&callback=myMap<?php echo $id ?>"></script>

我这里有个问题，那么只有最后一张餐厅地图显示了标记。显示所有其他餐厅地图，但没有标记。

【问题讨论】：

标签： javascript php html google-maps

【解决方案1】：

你的问题是最后一行：

<script src="https://maps.googleapis.com/maps/api/js?key=.....api key comes here....&callback=myMap<?php echo $id ?>"></script>

您只能这样做一次。要么在一次加载 API 脚本中调用所有单独的回调，要么同步加载 API（不带回调函数）

您可能在 javascript 控制台中收到关于多次加载 API 的错误。

#googleMap1 {
  height: 400px;
  width: 400px;
}

#googleMap2 {
  height: 400px;
  width: 400px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!--Google map-->
<!-- New York, NY, USA (40.7127753, -74.0059728) -->
<div id="googleMap1" style="width:100%;height:200px;"></div>

<script>
  function myMap1() {
    var mapProp1 = {
      center: new google.maps.LatLng(40.71277532, -74.0059728),
      zoom: 5,
    };
    var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);

    var goldenGatePosition1 = {
      lat: 40.7127753,
      lng: -74.0059728
    };
    var marker1 = new google.maps.Marker({
      position: goldenGatePosition1,
      map: map1,
      title: '$nombre'
    });
  }
  google.maps.event.addDomListener(window, 'load', myMap1);

</script>


<!--Google map-->
<!-- Los Angeles, CA, USA (34.0522342, -118.2436849) -->
<div id="googleMap2" style="width:100%;height:200px;"></div>

<script>
  function myMap2() {
    var mapProp2 = {
      center: new google.maps.LatLng(34.0522342, -118.2436849),
      zoom: 5,
    };
    var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);

    var goldenGatePosition2 = {
      lat: 34.0522342,
      lng: -118.2436849
    };
    var marker2 = new google.maps.Marker({
      position: goldenGatePosition2,
      map: map2,
      title: '$nombre'
    });
  }
  google.maps.event.addDomListener(window, 'load', myMap2);

</script>

【讨论】：