个人中心
gpt4 book ai didi

javascript - Google Chrome 无法显示个人 map

转载 作者：行者123 更新时间：2023-12-02 17:46:52 25 4
gpt4 key购买 nike

此代码不会在 Google Chrome 中显示。为什么？它在 Firefox 中有效。

代码:我正在尝试从 xml 文件加载一组坐标+描述渲染 map 并在其上绘制它们。

还有一个鼠标 handle ，可在单击鼠标时在屏幕上返回坐标。

<!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>

最佳答案

您正在加载 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 控制台中看到以下内容:

Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.

将 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>

关于javascript - Google Chrome 无法显示个人 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21678856/

25 4 0
文章推荐： javascript - Highcharts，在列或 x 轴类别上单击将职位编号附加到页面 url
文章推荐： jpa - 如何在 JPA 实体中设计多对多关系？
文章推荐： ORACLE 11G UTL_FILE + UTL_FILE_DIR - 无效目录
文章推荐： javascript - 小部件屏幕上的服务/模块之间的通信
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com