Question

我正在加载图片时显示“加载街景”。如果找不到坐标的图像，我会弹出一个对话框，指出“无法在街景中加载位置”。我想改变这一点，以便我不会弹出一个对话框，而是将LOADING STREET VIEW元素更改为在https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.414382,11.013988&heading=151.78&pitch=-0.76找到的图像。我对在javascript代码中引用html元素感到非常困惑。从我已经完成的研究中，我认为我需要在我的javascript代码中使用文档。感谢所有帮助，您可以在下面找到以下代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
    function initialize() {
        var markerPosition = new google.maps.LatLng(41.201316987470086, -82.98099300983233);
        var panoramaOptions = {
            position: markerPosition,
            pov: {
                heading: 165,
                pitch: 0,
                zoom: 1
            }
        };
        var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
        myPano.setVisible(false);
        new google.maps.Marker({map: myPano, position: markerPosition, title: 'Feature'});

        // add a variable that gets set when the position_changed handler gets fired off
        var positionDidChange = false;

        var newPov = {};
        var listenerHandle = google.maps.event.addListener(myPano, 'position_changed', function () {
            positionDidChange = true;
            google.maps.event.removeListener(listenerHandle);
            newPov.heading = google.maps.geometry.spherical.computeHeading(myPano.getPosition(), markerPosition);
            newPov.pitch = 0;
            newPov.zoom = 1;
            myPano.setPov(newPov); myPano.setVisible(true);
        });

        // add a function that gets fired off to see if the position did change so that the user does not wait forever
        setTimeout(function () {
            if (!positionDidChange) {
                alert("Unable to load location in street view");
            }
        }, 5000);
    }

</script>

</head>
<body onload="initialize()">
<div id="pano" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"> LOADING STREET VIEW...</div>
</body>
</html>

Answer 1

您可以使用document.getElementById('pano').innerHTML控制该文字，例如：

document.getElementById('pano').innerHTML = ' LOADING STREET VIEW..'; // what you have now
document.getElementById('pano').innerHTML = ''; //empty

Answer 2

创建一个将div的内部HTML替换为图像的函数：

var changeImage = function(){
    var image = "http://www.myimage.com/image.png";
    document.getElementById("pano").innerHTML = "<img src='" + image + "'>"; 
}

然后

if(!positionDidChange){
    changeImage();
}

JavaScript HTML改变了JavaScript代码中的HTML元素

2 个答案: