使用 LatLngBounds 和地图中心的问题
显示地图时遇到问题。 我有一个标记集合(通过 php 和 json 来自数据库),我希望相对于所有标记应用地图的中心和缩放;这就是为什么我不在地图上设置中心和缩放并使用 LatLngBounds 对象。问题是,它不起作用。
这是 javascript 代码:
var jsonURL="http://localhost/gpsdev/db2json.php";
var map;
function init(){
var options = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
scaleControl:true,
streetViewControl:false,
zoom:12,
center: new google.maps.LatLng(-25.973728,32.582745)
};
var mapBounds= new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), options);
$.getJSON(jsonURL,{cli:"1"}, function(data){
for (var i = 0; i < data.length; i++) {
var point = new google.maps.LatLng(data[i].Latitude,data[i].Longitude);
mapBounds.extend(point);
new google.maps.Marker({
position: point,
map: map,
title:data[i].PlateNR
});
}
});
map.fitBounds(mapBounds);
}
window.onload=init;
如果我删除缩放并居中,它就不起作用。这是在 javascript 上输入的 json:
[
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.973728\",\"Longitude\":\"32.582745\",\"Velocity\":\"0.000\",\"Ignition\":\"0\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.972456\",\"Longitude\":\"32.578968\",\"Velocity\":\"10.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.970083\",\"Longitude\":\"32.580879\",\"Velocity\":\"80.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.968191\",\"Longitude\":\"32.577724\",\"Velocity\":\"90.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"}
]
这里做错了什么?
Am having a problem showing a map.
I have a collection of markers (from a db via php and json) and i want the center and the zoom for the map applied relative to all of the markers; Thats why am not setting the center and the zoom on the map and using the LatLngBounds object. Thing is, its not working.
This is the javascript code:
var jsonURL="http://localhost/gpsdev/db2json.php";
var map;
function init(){
var options = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
scaleControl:true,
streetViewControl:false,
zoom:12,
center: new google.maps.LatLng(-25.973728,32.582745)
};
var mapBounds= new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), options);
$.getJSON(jsonURL,{cli:"1"}, function(data){
for (var i = 0; i < data.length; i++) {
var point = new google.maps.LatLng(data[i].Latitude,data[i].Longitude);
mapBounds.extend(point);
new google.maps.Marker({
position: point,
map: map,
title:data[i].PlateNR
});
}
});
map.fitBounds(mapBounds);
}
window.onload=init;
if i remove the zoom and center it doesnt work. this is the json am inputting on the javascript:
[
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.973728\",\"Longitude\":\"32.582745\",\"Velocity\":\"0.000\",\"Ignition\":\"0\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.972456\",\"Longitude\":\"32.578968\",\"Velocity\":\"10.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.970083\",\"Longitude\":\"32.580879\",\"Velocity\":\"80.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.968191\",\"Longitude\":\"32.577724\",\"Velocity\":\"90.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"}
]
What am doing wrong here?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
查看本教程:http://www.svennerberg.com/ 2008/11/bounding-box-in-google-maps/,但要注意它不是关于最新的 API (v3)。
Check this tutorial: http://www.svennerberg.com/2008/11/bounding-box-in-google-maps/, but be careful its not about the latest API (v3).