Question

此代码未在Google Chrome中显示。为什么？它适用于Firefox。

代码：我正在尝试从xml文件加载一组坐标+描述到渲染一张地图并在上面绘制它们。

还有一个鼠标手柄可以在屏幕上返回鼠标点击的坐标。

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <link rel="stylesheet" href="maps.css">
    <div id="map_canvas"></div>
    <!-- Loading jQuery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <!-- Loading Google Map API engine v3 -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


    <script src="http://maps.googleapis.com/maps/api/js?key=MYID&sensor=false">
    </script>

    <script type="text/javascript">
    var map;
    var global_markers = [];
    var marker = null;
    var markers = [];

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "imoveis.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    var x = xmlDoc.getElementsByTagName("imovel");

    for (i = 0; i < x.length; i++) {
        var lat = x[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue
        var lng = x[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue
        var desc = x[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue
        var aux = [lat, lng, desc];
        markers.push(aux);
    }

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

    function initialize() {
        //geocoder = new google.maps.Geocoder();
        var myOptions = {
            zoom: 12,
            center: new google.maps.LatLng(-21.2450, -45),
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        addMarker();

        google.maps.event.addListener(map, 'click', function(event) {
            //call function to create marker

            $("#coordinate").val(event.latLng.lat() + ", " + event.latLng.lng());
            $("#coordinate").select();

            //delete the old marker
            if (marker) {
                marker.setMap(null);
            }

            //creer à la nouvelle emplacement
            marker = new google.maps.Marker({
                position: event.latLng,
                map: map
            });

        });
    }

    function addMarker() {
        for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i][0]);
            var lng = parseFloat(markers[i][1]);
            var trailhead_name = markers[i][2];

            var myLatlng = new google.maps.LatLng(lat, lng);

            var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
            });

            marker['infowindow'] = contentString;

            global_markers[i] = marker;

            google.maps.event.addListener(global_markers[i], 'click', function() {
                infowindow.setContent(this['infowindow']);
                infowindow.open(map, this);
            });
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
    <input type="text" id="coordinate" value="Latitude, Longitude" />
    <div id="map"></div>

</body>

</html>

Answer 1

您正在加载Google Maps API两次：

<!-- Loading Google Map API engine v3 -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


<script src="http://maps.googleapis.com/maps/api/js?key=MYID&sensor=false">
</script>

您应该会在Chrome DevTools控制台中看到以下内容：

警告：您已在此页面上多次添加Google Maps API。这可能会导致意外错误。

将API的HTML更改为仅一个script标记：

<!-- Loading Google Map API engine v3 -->
<script src="http://maps.googleapis.com/maps/api/js?v=3&key=MYID&sensor=false"></script>

Google Chrome无法显示个人地图

1 个答案: