javascript div 显示不正确答案

【问题标题】：javascript div displaying incorrectlyjavascript div 显示不正确
【发布时间】：2013-11-29 20:19:14
【问题描述】：

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

背景：

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

所以，我用谷歌地图去了。

构建了一个 KML 和一个页面，看起来真的很棒。

但是，我无法让街景地图出现在正确的弹出窗口中。

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

它应该会打开一个窗口。单击另一个图钉，原来的窗口应该会消失，并且应该会出现具有正确街景的新窗口。

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

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

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

这是我正在处理的网站。 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>

任何帮助将不胜感激。

特雷夫

【问题讨论】：

不确定，但在我看来，您的 html 中有一个
，然后单击在 javascript 代码中添加另一个 content: "

标签： javascript google-maps

【解决方案1】：

您遇到了时间问题。

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

两件事：

只使用一个全局信息窗口
使用信息窗口上的“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>

【讨论】：

【解决方案2】：

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

我更新了你的代码，只使用一个信息窗口，试试吧：

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);

【讨论】：

也许我们也不应该忘记，google.maps 实际上是异步执行的？
我在推特上的朋友也指出他认为我可能正在遭受这种痛苦...stackoverflow.com/questions/13588293/streetview-into-infowindow
@Nelson 感谢您花时间查看此内容。非常感谢！