我是 jQuery Mobile 初学者,我正在尝试从 JSON 文件读取数据并在 Google map 标记中填充信息(例如坐标)。
此代码工作正常,但没有填充任何标记。任何人都可以帮助我发现 JSON 问题吗?
$(document).on("pageinit", "#agents", function () {
var defaultLatLng = new google.maps.LatLng(-25.975769, 32.582499); // Default
if (navigator.geolocation) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {
maximumAge: 500000,
enableHighAccuracy: true,
timeout: 6000
});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
//READ FROM JSON
$.getJSON('data/agents.json', function (data) {
$.each(data.markers, function (i, marker) {
var marker = new google.maps.Marker({
position: Marker.LatLng(marker.latitude, marker.longitude),
map: map,
title: Marker.title(marker.latitude, marker.longitude),
});
}).click(function () {
$('#map-canvas').gmap('openInfoWindow', {
'address': marker.address
}, this);
});
});
JSON
{
"markers": [{
"latitude": -25.975769,
"longitude": 32.582499,
"title": "ACME Company",
"address": "my address 1"
}, {
"latitude": -25.977743,
"longitude": 32.579959,
"title": "XPTO Company",
"address": "my address 2"
}]
}
最佳答案
为了减少困惑,我将参数标记的名称更改为marker_data(这并不是真正需要的)。 您的问题出在位置:和标题:的行上。
...
//READ FROM JSON
$.getJSON('data_agents.json', function (data) {
$.each(data.markers, function (i, marker_data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(marker_data.latitude, marker_data.longitude),
map: map,
title: marker_data.title,
});
}).click(function () {
$('#map-canvas').gmap('openInfoWindow', {
'address': marker_data.address
}, this);
});
});
...
标记被放置在 map 上,但我没有检查信息窗口
<小时/>编辑:这是一个功能示例
<style>
#map-canvas {
height: 500px;
}
.gm-style-iw{ /* infowindow */
width: 200px;
}
</style>
<div id="map-canvas"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
$(document).ready(function () {
var defaultLatLng = new google.maps.LatLng(-25.975769, 32.582499); // Default
if (navigator.geolocation) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {
maximumAge: 500000,
enableHighAccuracy: true,
timeout: 6000
});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// place the infowindow. Invisible, without content.
var infowindow = new google.maps.InfoWindow({
content: '',
});
//READ FROM JSON
$.getJSON('data/agents.json', function (data) {
$.each(data.markers, function (i, marker_data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(marker_data.latitude, marker_data.longitude),
map: map,
title: marker_data.title,
});
// when the client clicks on a marker we set the content and bind the position to the marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(marker_data.address);
infowindow.setPosition(this.getPosition())
infowindow.setMap(map);
});
});
});
}
});
</script>
关于javascript - 从 JSON 填充 Google map 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27624103/