infowindow中带有街道视图的谷歌地图api不起作用

google map api with street view in infowindow not working

本文关键字：谷歌地图 api 不起作用 视图 街道 infowindow      更新时间：2023-09-26

在底部的链接中，我放了我的谷歌地图，我有问题，因为当我点击标记时，它只会从本地化字符串中获取最后的数据。

http://bit.ly/1tYVIdZ

你能帮我吗？

您只需要一个var信息窗口。这不应该在for（）中声明。注意：只能有一个id="content"（id是唯一的）。

以下是如何看待它：

  • 当客户端点击一个标记时，您将该标记临时存储到var currentMarker；然后打开信息窗口。这会触发信息窗口.domready.

  • 当信息窗口的dom准备就绪时，只需创建新的var pano，并将currentMarker的位置（窗口的位置和全景视图的坐标）提供给它。

（请注意其他脚本编写者：这需要与index.php位于同一文件夹中的"marker.png"）代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
    var LocationData = [
        [53.13449, 18.04292, "1. ul. Gajowa 99, 85-700 Bydgoszcz" ], 
        [53.03783, 18.61368, "2. ul. Polna 17, 87-100 Torun"],
        [54.37890, 18.59159, "3. ul. Partyzantów 70, 80-952 Gdansk" ],
        [50.23122, 18.99280, "4. ul. Rolna 7, 40-555 Katowice" ],
        [50.06358, 19.97002, "5. ul. Cystersów 21, 31-553 Krakow" ],
        [50.01563, 21.97702, "6. ul. Matuszczaka 5, 35-083 Rzeszów" ],
        [51.20651, 22.58249, "7. ul. Sierpinskiego 26, 20-448 Lublin" ],
        [53.78115, 20.50410, "8. ul. Towarowa 4, 10-417 Olsztyn" ],
        [53.40699, 14.59046, "9. ul.Gdanska 15a, 70-661 Szczecin" ],
        [54.18990, 16.15861, "10. ul. Bohaterów W-wy 3, 75-211 Koszalin" ],
        [52.22472, 20.93692, "11. ul. Sowinskiego 28, 01-105 Warszawa" ]
    ];
    function initialize() {
      var map = new google.maps.Map(document.getElementById('map-canvas'));
      var contentString = '<div id="content" style="width:300px;height:300px;"></div>';
      var bounds = new google.maps.LatLngBounds();
      var currentMarker = null;
      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });
      google.maps.event.addListener(infowindow, 'domready', function() {
        var pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
          navigationControl: true,
          navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
          enableCloseButton: false,
          addressControl: false,
          linksControl: true
        });
        // set the position of the infoWindow (the div points to the marker)
        infowindow.setPosition(currentMarker.getPosition());
        // set the position of the panoramic view to the right coordinates
        pano.setPosition(currentMarker.getPosition());
        pano.setVisible(true);
      });
      for (var i in LocationData) {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2],
            icon: 'marker.png'
        });
        google.maps.event.addListener(marker, 'click', function() {
          currentMarker = this;         // store the marker that was clicked upon
          infowindow.open(map, this);
        });
      }
      map.fitBounds(bounds);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
相关文章：