Question

我不经常使用JavaScript。在后端工作更多。请温柔。

背景：

我的任务是在地图上可视化地址数据库。

所以，我已经使用谷歌地图了。

构建了一个KML和一个页面，它看起来非常好。

但是，我在浏览街景地图时遇到问题。

在视觉上，我可以解释这个问题。放大几次，然后单击几个图钉/图标。

它应该打开一个窗口。单击另一个图钉，原始窗口将消失，并且应在其中显示带有正确街景的新窗口。

此刻。第一个窗口打开空白。然后当您单击第二个图标时，会出现一个新的空窗口，地图会出现在第一个窗口中。

从技术上讲，我不知道如何解释这个问题。感觉我需要以某种方式使其隐形或摧毁它。

这就是我所看到的......

this is what I am seeing

这是我正在努力的网站。 http://googlemap.azurewebsites.net/

这是代码......

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
<title>Street View service</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&sensor=false"></script>
<script>
    function initialize() {

        var cardiff = new google.maps.LatLng(42.345573, -71.098326);
        geocoder = new google.maps.Geocoder();

        var mapOptions = {
            center: cardiff,
            zoom: 14
        };

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


        var kmlLayer = new google.maps.KmlLayer({
            url: 'http://googlemap.azurewebsites.net/data6.txt',
            suppressInfoWindows: true,
            map: map
        });

        google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {

            var infowindow = new google.maps.InfoWindow({
                content: "<div id='pano' style='width: 400px; height: 300px;'></div><div>" + kmlEvent.featureData.name + "</div>" + "<div>" + kmlEvent.featureData.description + "</div>"
            });


            var text = kmlEvent.featureData.description;
            geocoder.geocode({ 'address': kmlEvent.featureData.description }, function (results, status)
            {
                var address = new google.maps.LatLng(results[0].geometry.location.ob, results[0].geometry.location.pb);
                var panoramaOptions = {
                    position: address,
                    pov: {
                        heading: 34,
                        pitch: 10
                    }
                };

                //obj = document.getElementById("pano");
                //document.body.removeChild(obj);

                var marker = new google.maps.Marker({
                    position: address,
                    map: map,
                    title: 'Uluru (Ayers Rock)'
                });

                var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
                infowindow.open(map, marker);
                map.setStreetView(panorama);

            });

        });


    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas" style="width: 100%; height: 100%"></div>
  <div id="pano"></div>
<!--<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height:     300px;"></div>-->
  </body>
</html>

非常感谢任何帮助。

崔佛

Answer 1

您正在点击处理程序中创建infowindows，因此您每次点击都会创建一个新的信息窗口，您应该只创建一个信息窗口，并在您的点击处理程序中更新其内容。

我更新了你的代码只使用一个infowindow，试试吧：

function initialize() {

    var cardiff = new google.maps.LatLng(42.345573, -71.098326);
    geocoder = new google.maps.Geocoder();

    var mapOptions = {
        center: cardiff,
        zoom: 14
    };

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


    var kmlLayer = new google.maps.KmlLayer({
        url: 'http://googlemap.azurewebsites.net/data6.txt',
        suppressInfoWindows: true,
        map: map
    });

    var infowindow = new google.maps.InfoWindow;
    google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {

        infowindow.setContent("<div id='pano' style='width: 400px; height: 300px;'></div><div>" + kmlEvent.featureData.name + "</div>" + "<div>" + kmlEvent.featureData.description + "</div>");


        var text = kmlEvent.featureData.description;
        geocoder.geocode({ 'address': kmlEvent.featureData.description }, function (results, status)
        {
            var address = new google.maps.LatLng(results[0].geometry.location.ob, results[0].geometry.location.pb);
            var panoramaOptions = {
                position: address,
                pov: {
                    heading: 34,
                    pitch: 10
                }
            };

            //obj = document.getElementById("pano");
            //document.body.removeChild(obj);

            var marker = new google.maps.Marker({
                position: address,
                map: map,
                title: 'Uluru (Ayers Rock)'
            });

            var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
            infowindow.open(map, marker);

            map.setStreetView(panorama);

        });

    });


}

google.maps.event.addListener(map, 'click', function() {
  infoWindow.close();
});

google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

你有时间问题。

点击标记
创建标记和信息窗
open infowindow
尝试打开街景，DOM中没有id ='pano'div（信息窗口尚未渲染）
点击其他标记
创建标记和信息窗
open infowindow
打开街景，现在有一个id ='pano'的div（在最后一个标记的infowindow中）。

两件事：

仅使用一个全局信息窗
使用infowindow上的'domready'事件来渲染街景。

working example

    <script>
    var infowindow = new google.maps.InfoWindow({});
    function initialize() {

        var cardiff = new google.maps.LatLng(42.345573, -71.098326);
        geocoder = new google.maps.Geocoder();

        var mapOptions = {
            center: cardiff,
            zoom: 14
        };

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


        var kmlLayer = new google.maps.KmlLayer({
            url: 'http://googlemap.azurewebsites.net/data6.txt',
            suppressInfoWindows: true,
            map: map
        });

        google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {
            infowindow.setContent("<div id='pano' style='width: 400px; height: 300px;'></div><div>" + kmlEvent.featureData.name + "</div>" + "<div>" + kmlEvent.featureData.description + "</div>");

            var address = kmlEvent.featureData.description;
            geocoder.geocode({ 'address': address }, function (results, status)
            {
                var latlng = results[0].geometry.location;
                var panoramaOptions = {
                    position: latlng,
                    pov: {
                        heading: 34,
                        pitch: 10
                    }
                };

                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: address
                });
                infowindow.open(map, marker);
                google.maps.event.addListenerOnce(infowindow, 'domready', function() {
                  var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
                  map.setStreetView(panorama);
                });

            });

        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);

    </script>

javascript div显示不正确

2 个答案: