Question

我想为我的地图使用信息窗口。

当我运行此代码时，信息窗口没有出现。我希望它在我点击标记时出现。

<div id="map" style="width:100%;height:320px"></div>
<script>
    function myMap() {
      var mapCanvas = document.getElementById("map");
      var mapOptions = {
        center: new google.maps.LatLng(47.3921611, 8.4957963),
        zoom: 14
      }

      var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
          'south west of the nearest large town, Alice Springs; 450&#160;km '+
          '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      var map = new google.maps.Map(mapCanvas, mapOptions);
      var image = '<?php echo bloginfo("url") ?>/G_marker.png';
      var beachMarker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        icon: image,
      });
    }
    marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    google.maps.event.addDomListener(window, 'load', myMap);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTzoFPuiNSd_JH_jGT7Pq_KMM7XoV2PMM&callback=myMap"></script>

我实际上复制了InfoWindow部分并将其粘贴到我的代码中，但我仍然不明白为什么它不起作用。我该如何解决这个问题？

Answer 1

发布的代码出现javascript错误：Uncaught ReferenceError: marker is not defined。您的代码调用该变量beachMarker，并且应在内部 myMap（初始化）函数（在该变量存在的范围内）设置单击侦听器。

working fiddle

代码段

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

<div id="map" style="width:100%;height:320px"></div>
<script>
  function myMap() {
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
      center: new google.maps.LatLng(47.3921611, 8.4957963),
      zoom: 14
    }

    var contentString = '<div id="content">' +
      '<div id="siteNotice">' +
      '</div>' +
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
      '<div id="bodyContent">' +
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the ' +
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
      'south west of the nearest large town, Alice Springs; 450&#160;km ' +
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
      'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
      'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
      'Aboriginal people of the area. It has many springs, waterholes, ' +
      'rock caves and ancient paintings. Uluru is listed as a World ' +
      'Heritage Site.</p>' +
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
      '(last visited June 22, 2009).</p>' +
      '</div>' +
      '</div>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    var map = new google.maps.Map(mapCanvas, mapOptions);
    var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
    var beachMarker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: image,
    });
    beachMarker.addListener('click', function() {
      infowindow.open(map, beachMarker);
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Answer 2

你创造了＆＃34; beachMarker＆＃34;变量然后使用＆＃34; marker＆＃34; ：P

尝试使用：

beachMarker.addListener('click', function() {
        infowindow.open(map, beachMarker);
    });

单击标记时显示InfoWindow

2 个答案: