我正在尝试使用php和mysql动态地在Windows地图上放置标记。 我的db数据是json格式,而且php工作正常。
是get_locations。 php并提供如下输出:
[{
"id": "5",
"0": "5",
"name": "Pan Africa Market",
"1": "Pan Africa Market",
"address": "1521 1st Ave, Seattle, WA",
"2": "1521 1st Ave, Seattle, WA",
"lat": "18.563574",
"3": "18.563574",
"lng": "73.801155",
"4": "73.801155",
"type": "toilet",
"5": "toilet"
}, {
"id": "6",
"0": "6",
"name": "Buddha Thai & Bar",
"1": "Buddha Thai & Bar",
"address": "2222 2nd Ave, Seattle, WA",
"2": "2222 2nd Ave, Seattle, WA",
"lat": "19.865541",
"3": "19.865541",
"lng": "75.346642",
"4": "75.346642",
"type": "toilet",
"5": "toilet"
}, {
"id": "7",
"0": "7",
"name": "The Melting Pot",
"1": "The Melting Pot",
"address": "14 Mercer St, Seattle, WA",
"2": "14 Mercer St, Seattle, WA",
"lat": "18.574535",
"3": "18.574535",
"lng": "73.802521",
"4": "73.802521",
"type": "toilet",
"5": "toilet"
}]
但是有ajax和js的map.html运行不正常。
在控制台上,没有任何内容显示为错误。所以我不知道什么是错的。
你们中的任何人都可以参加吗?
下面是我的map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google Maps Example</title>
<style type="text/css">
body { font: normal 14px Verdana; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
#sidebar { float: right; width: 30%; }
#main { padding-right: 15px; }
.infoWindow { width: 220px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var map;
// Ban Jelacic Square - Center of Zagreb, Croatia
var center = new google.maps.LatLng(18.520510, 73.856733);
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
makeRequest('get_locations.php', function(data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
}
function displayLocation(location) {
//alert ("inside disp loc");
var content = '<div class="infoWindow"><strong>' + location.name + '</strong>'
+ '<br/>' + location.address
+ '<br/>' + location.description + '</div>';
if (parseInt(location.lat) == 0) {
geocoder.geocode( { 'address': location.address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
});
} else {
alert("lat is "+location.lat)
var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
var icon= 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
var html = "<b>" + location.name + "</b> <br/>";
var infoWindow = new google.maps.InfoWindow;
var marker = new google.maps.Marker({
map: map,
position: position,
title: location.name,
icon: icon
});
bindInfoWindow(marker, map, infoWindow, html);
//alert("marker created");
// google.maps.event.addListener(marker, 'click', function() {
// infowindow.setContent(content);
// infowindow.open(map,marker);
// });
// alert("marker addd listener added");
}
}
function makeRequest(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
//]]>
</script>
</head>
<body onload="init();">
<h1>Places to check out in Zagreb</h1>
<section id="sidebar">
<div id="directions_panel"></div>
</section>
<section id="main">
<div id="map_canvas" style="width: 70%; height: 500px;"></div>
</section>
</body>
</html>
请指导我。
答案 0 :(得分:1)
根据您的JSON文件,它应该是location.lng而不是location.lon。我已经尝试过这样的修复,现在就可以了。