从 JSON 填充谷歌地图标记
Populate Google Maps Markers from JSON
我是jQuery Mobile初学者,我正在尝试从JSON文件中读取数据并在Google地图标记中填充信息(例如坐标)。
此代码工作正常,但未填充标记。任何人都可以帮助我发现 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);
});
});
杰伦
{
"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"
}]
}
为了减少混淆,我更改了参数标记 tot 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);
});
});
...
标记被放置在地图上,但我没有检查信息窗口
编辑:这是一个功能示例
<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>
相关文章:
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- 将图标作为参数传递不会;t工作-谷歌地图
- 谷歌地图隐藏手图标
- 从谷歌地图信息窗口中删除关闭图标
- 在javascript中设置谷歌地图标记图标属性
- 我是否可以在单击特定图标时更改地图标记图标,然后在单击另一个图标时切换,等等
- 我如何才能在某些条件下更改c#中谷歌地图标记的图标
- 使用HTML元素代替gmap3的地图标记图标
- 谷歌地图标记图标作为变量
- 我如何使谷歌地图不更改标记的自定义图标大小
- 饼图而不是谷歌地图中的标记集群图标
- 如何在谷歌地图上放置图标标记,图标数量是否有配额
- 可拖动图标未显示在 Google 地图顶部且不重复
- 谷歌地图v3更改标记图标在安卓网络视图
- AngularJS谷歌地图(ng-map)图标网址不起作用
- 带有群集和过滤器复选框的地图框个性化图标
- 添加 removeMarker 函数时,每 5 秒在地图上加载一次图钉不会显示图标