此代码不会在 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/