Question

使用Google maps api加载infoWindows时遇到问题。标记和infoWindowContent是json生成的。所有看起来都很酷，标记在地图中加载，即使使用特殊标记（见下文）。

只有infoWindows没有从＆＃39; var infoWindowContent＆＃39;中加载/打开。

这可能是我现在做错了2天的＆addcistener＆＃39;任何帮助表示赞赏！

以下是所有代码：

function initMap() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 8,
      center: {lat:".$c_geo_latitude.", lng: ".$c_geo_longitude."}
    });

    setMarkers(map);
}

然后我们有（PHP中的所有内容）：

var infoWindowContent = [$infoWindowItems];

其中包含这样的字段（使用预先生成的HTML）：

var infoWindowContent = [
    ['<div class="InfoAll">'+
        '<h1>Hi you,</h1><div id="bodyContent">'+
        '<br />This marker is placed in the area where you are right now.</div></div>'],
    ['<div class="InfoAll">'+
    ....etc";

//这里是标记，加上代码的其余部分。

var markers = [
    ['Place 1',52.066700,5.100000,1413,'hotel'],
    ['Place 2',52.095411,5.130759,1414,'parking'],
    ['Place 3',52.238407,5.470300,1415,'hotel'],
    ['Place 4',52.373610,4.885844,1416,'7Eleven']];

function setMarkers(map) {
    for (var i = 0; i < markers.length; i++) {
      var marker = markers[i];

        if(marker[4] == \"hotel\") { showIcon = \"http://maps.google.com/mapfiles/ms/icons/red-dot.png\"; setIndex = 1; }
        if(marker[4] == \"parking\") {  showIcon = \"http://maps.google.com/mapfiles/ms/icons/blue-dot.png\"; setIndex = 1; }
        if(marker[4] == \"7Eleven\") {  showIcon = \"http://maps.google.com/mapfiles/ms/icons/green-dot.png\"; setIndex = 99; }

      var marker = new google.maps.Marker({
        position: {lat: marker[1], lng: marker[2]},
        map: map,
        icon: showIcon,
        shape: shape,
        title: marker[0],
        zIndex: marker[3]
      });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
            var currMarker = markers[i][3]; 
            $(document).data({ currMarker: currMarker }); 
            }
        })(marker, i));
    }
}

PS。我们需要保留这个，因为我们也将数据加载到infoWindow中：

$(document).data({ currMarker: currMarker });

Answer 1

我发布的代码Uncaught ReferenceError: infoWindow is not defined.出现javascript错误，因为发布的代码中未定义infoWindow。

fixed fiddle

定义infoWindow的代码段：

var infoWindowContent = [
  ['<div class="InfoAll">' +
    '<h1>#1 Hi you,</h1><div id="bodyContent">' +
    '<br />This marker is placed in the area where you are right now.</div></div>'
  ],
  ['<div class="InfoAll">' +
    '<h1>#2 Hi you,</h1><div id="bodyContent">' +
    '<br />This marker is placed in the area where you are right now.</div></div>'
  ],
];
var markers = [
  ['Place 1', 52.066700, 5.100000, 1413, 'hotel'],
  ['Place 2', 52.095411, 5.130759, 1414, 'parking'],
  /* ['Place 3',52.238407,5.470300,1415,'hotel'],
  ['Place 4',52.373610,4.885844,1416,'7Eleven'] */
];

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-canvas"></div>
<script defer>
  var infoWindow;

  function initMap() {
    infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 8,
      center: {
        lat: 42,
        lng: -72
      }
    });
    setMarkers(map);
  }

  function setMarkers(map) {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      var marker = markers[i];

      if (marker[4] == "hotel") {
        showIcon = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
        setIndex = 1;
      }
      if (marker[4] == "parking") {
        showIcon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";
        setIndex = 1;
      }
      if (marker[4] == "7Eleven") {
        showIcon = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
        setIndex = 99;
      }

      var marker = new google.maps.Marker({
        position: {
          lat: marker[1],
          lng: marker[2]
        },
        map: map,
        icon: showIcon,
        title: marker[0],
        zIndex: marker[3]
      });
      bounds.extend(marker.getPosition());
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infoWindow.setContent(infoWindowContent[i][0]);
          infoWindow.open(map, marker);
          var currMarker = markers[i][3];
          $(document).data({
            currMarker: currMarker
          });
        }
      })(marker, i));
    }
    map.fitBounds(bounds);
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

谷歌地图在标记点击上加载infoWindows

1 个答案: