在Google地图上使用json和placeid的多个标记 [英] Multiple markers on google maps using json and placeid
本文介绍了在Google地图上使用json和placeid的多个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
从一开始。我有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 / javascriptsrc =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-canvasstyle =width：500px; height：400px>< / div>
< / body>
< / html>
JS：
var openedInfoWindow = null;
函数initialize（）{
var latitude = 51.9315631，
longitude = 19.473451，
radius = 8000，
center = new google.maps.LatLng （纬度，经度），
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）;
函数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
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（地图，标记，数据）;
function infoBox（map，marker，data）{
var infoWindow = new google.maps.InfoWindow（）;
google.maps.event.addListener（marker，click，function（e）{
infoWindow.setContent（data.content）;
infoWindow。打开（地图，标记）;
}）;
（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未定义
您在错误位置调用 InfoBox 函数（ marker exists）。
一旦我修复了我获得的infowindows，但是你有一个问题可以通过函数闭包来解决（所有的infowindows都有内容3，最后一个标记处理）。 （有关函数闭包的示例，请参阅 Google Maps JS API v3 - 简单多标记示例）
程式码片段：
$ b
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（la titude，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
< script src =https://maps.googleapis.com/maps/api/js?libraries=places> < / script>< div id =map-canvasstyle =width：500px; height：400px>< / div>
the problem i've got is that I don't know where the problem is :P From the beginning. I've got 3 files, the json file JS and html. JS should get placeid from json and based on that place a marker on the map. It's all pretty simple but somehow it doesn't work, the map is being created but no markers show up. Here're the files:
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);
I'd be very grateful for any suggestions how to solve this :)
解决方案
With the posted code I get a javascript error: Uncaught ReferenceError: marker is not defined
You are calling the InfoBox function in the wrong place (outside the scope where marker exists).
Once I fix that I get infowindows, but you have an issue that can be solved by function closure (all the infowindows have the content "3", the last marker processed). (For an example of function closure see Google Maps JS API v3 - Simple Multiple Marker Example)
code snippet:
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"></script>
<div id="map-canvas" style="width:500px; height:400px"></div>
这篇关于在Google地图上使用json和placeid的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
