javascript - 有没有更好的方法让谷歌地图工作？

Question

我正在使用 cakephp，这个项目是关于庄园的。我正在尝试将带有图片的庄园放在谷歌地图上。我当前的代码就像

<script>
    var map;
    var infoWindow;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 36.591258, lng: 136.624976},
        zoom: 9,
        styles:[
          {
              "featureType": "landscape",
              "elementType": "all",
              "stylers": [
                  {
                      "color": "#e4e4e4"
                  }
              ]
          },
          {
              "featureType": "poi",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "road",
              "elementType": "all",
              "stylers": [
                  {
                      "saturation": -100
                  },
                  {
                      "lightness": 45
                  }
              ]
          },
          {
              "featureType": "road.highway",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "simplified"
                  }
              ]
          },
          {
              "featureType": "road.highway",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#fc9700"
                  }
              ]
          },
          {
              "featureType": "road.arterial",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#c5c5c5"
                  }
              ]
          },
          {
              "featureType": "road.arterial",
              "elementType": "labels.icon",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "road.local",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "on"
                  }
              ]
          },
          {
              "featureType": "transit",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "water",
              "elementType": "all",
              "stylers": [
                  {
                      "color": "#999797"
                  },
                  {
                      "visibility": "on"
                  }
              ]
          }
      ],
      });
      <?php foreach ($rooms as $k => $room): ?>
          var marker = new google.maps.Marker({
              position: {lat: <?= h($room['estate_latitude']) ?>, lng: <?= h($room['estate_longitude']) ?>},
              map: map,
              icon: new google.maps.MarkerImage(
                 '<?= $this->Url->build('/') ?>img/ico_pin.svg',
                  new google.maps.Size(30, 30),
                  new google.maps.Point(0, 0),
                  new google.maps.Point(21, 21)
              ),  
          });
          infoWindow<?= $k ?> = new google.maps.InfoWindow({
            content: '<div class="area_wall_balloon"></div><div class="img_arrow"></div>'
          });
           marker.addListener('click', function() {
           infoWindow<?= $k ?>.open(map, marker);
          });
      <?php endforeach; ?>
      var mapStyle = [ {
          "stylers": [ {
          "saturation": -100,
          } ],
      } ];
    }
</script>

在此处输入图像描述 我要解决的问题是，当我单击 2 时，会显示 1 的窗口:( 我添加了屏幕截图。如果您能给我建议，我将不胜感激。

标签： javascriptgoogle-maps

Answer 1

你完全混合了 JavaScript 和 PHP。正如我所见，您正在为多个标记创建多个事件。意味着如果有 1000 个标记，那么为什么要使用 1000 个事件触发器。为此，仅使用一个呈现标记细节的事件。