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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com