[英]Multiple markers on google maps using json and placeid
我遇到的问题是,我不知道问题出在哪里:P从一开始。 我有3个文件,json文件JS和html。 JS应该从json获取placeid,并根据该标记在地图上进行放置。 一切都非常简单,但是由于某种原因它不起作用,正在创建地图,但是没有显示标记。 这是文件:
JSON:
[{ "placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI' , "content": " 1 " } ,
{ "placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM' , "content": " 2 " } ,
{ "placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs' , "content": " 3 " } ]
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="functions_edit.js"></script>
</head>
<body>
<div id="map-canvas" style="width:500px; height:400px"></div>
</body>
</html>
JS:
var openedInfoWindow = null;
function initialize() {
var latitude = 51.9315631,
longitude = 19.473451,
radius = 8000,
center = new google.maps.LatLng(latitude,longitude),
mapOptions = {
center: center,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
setMarkers(center, radius, map);
}
function setMarkers(center, radius, map) {
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "placeid.json",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i];
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: data.placeid
}, function (result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
var marker = new google.maps.Marker({
map: map,
place: {
placeId: data.placeid,
location: result.geometry.location
}
//position: result.geometry.location
});
});
infoBox(map, marker, data);
}
}
function infoBox(map, marker, data) {
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.content);
infoWindow.open(map, marker);
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.content);
infoWindow.open(map, marker);
});
})(marker, data);
}
google.maps.event.addDomListener(window, 'load', initialize);
使用发布的代码,我得到一个JavaScript错误: Uncaught ReferenceError: marker is not defined
您在错误的位置( marker
所在的作用域之外)调用了InfoBox
函数。
解决问题后,我便获得了信息窗口,但是您可以通过函数关闭来解决问题(所有信息窗口的内容均为“ 3”,这是最后处理的标记)。 (有关函数关闭的示例,请参阅Google Maps JS API v3-简单多个标记示例 )
代码段:
var placeid_json = [{ "placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI', "content": " 1 " }, { "placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM', "content": " 2 " }, { "placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs', "content": " 3 " }]; var openedInfoWindow = null; function initialize() { var latitude = 51.9315631, longitude = 19.473451, radius = 8000, center = new google.maps.LatLng(latitude, longitude), mapOptions = { center: center, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); setMarkers(center, radius, map); } function setMarkers(center, radius, map) { /* var json = (function () { var json = null; $.ajax({ 'async': false, 'global': false, 'url': "placeid.json", 'dataType': "json", 'success': function (data) { json = data; } }); return json; })(); */ var json = placeid_json; for (var i = 0, length = json.length; i < length; i++) { var data = json[i]; createMarker(data, map); } } function createMarker(data, map) { var service = new google.maps.places.PlacesService(map); service.getDetails({ placeId: data.placeid }, function (result, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { alert(status); return; } var marker = new google.maps.Marker({ map: map, place: { placeId: data.placeid, location: result.geometry.location } //position: result.geometry.location }); infoBox(map, marker, data, result); }); } function infoBox(map, marker, data, result) { var infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.content); infoWindow.open(map, marker); }); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.content+"<br>"+result.name); infoWindow.open(map, marker); }); })(marker, data); } google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas" style="width:500px; height:400px"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.