Question

我正在尝试将以下两个代码块组合在一起。

但由于某种原因，当我在浏览器中加载页面时，首先，第二个代码块在地图上加载标记，然后页面刷新，并在地图上加载第一批代码！

这是我的全部代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Google maps</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

     var map;
     geocoder = new google.maps.Geocoder();

     function initialize() {
         var mapOptions = {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         };

         map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

         codeAddress();
     }

     function codeAddress() {
         var address = '<?= $_GET['location'] ?>';
         geocoder.geocode( { 'address': address}, function(results, status) {
             if (status == google.maps.GeocoderStatus.OK) {
                 map.setCenter(results[0].geometry.location);
                 var marker = new google.maps.Marker({
                      icon: 'meicon.png',
                      map: map,
                      position: results[0].geometry.location
                 });
             } else {
                alert("Error loading map");
             }
         });
     }
     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>

  <body>
    <div id="map-canvas"></div>
  <script type="text/javascript">
    var locations = [
        ['Bondi Beach', 51.5033631,-0.1276253, 1]
    ];
    var maps = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 15,
      center: new google.maps.LatLng(51.5033630,-0.1276250),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var markers, i;

    for (i = 0; i < locations.length; i++) {  
      markers = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: maps
      });

      google.maps.event.addListener(markers, 'click', (function(markers, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, markers);
        }
      })(markers, i));
    }
  </script>
  </body>
</html>

有人可以就此问题提出建议吗？

提前致谢。

Answer 1

这可能是因为你在第一个区块的地址上调用了地理编码器，这是谷歌检查地址的异步调用。当代码与谷歌交谈时，页面运行第二个代码块。当该调用返回时，它将运行第一个块中的其余代码，这将设置地图的中心。

Answer 2

原因很简单，您正在加载两个映射，第一个在<head>脚本中调用的映射是在map-canvas中构建一个名为map的映射。第二个在正文脚本中，您创建另一个名为maps的地图，这也是在map-canvas中创建的。您只需要一张工作地图，并按此完成您的操作。

多个Google地图图标？

2 个答案: