[英]Centering a Google Map based on parsed XML Latitude and Longitude values
这一点Javascript解析一个xml文件,其中包含起点和终点的纬度和经度坐标。 我可以很好地在地图上找到标记,我遇到的问题是地图不以点为中心(最终它将调用Google Directions Service并绘制两点之间的路线,所以让地图很好地适应两个点,而不仅仅是以其中一个点为中心,这样会很好。
在那一刻,地图是使用硬编码的lat和long值创建的,所以我知道需要改变,但我已经尝试放入'startpoint,'端点'无济于事,地图不加载,所以我猜我在下面这样做的方式是不正确的。
jQuery(document).ready(function($) {
downloadUrl("xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("title");
var startpoint = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("startlat")),
parseFloat(markers[i].getAttribute("startlng")));
var endpoint = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("endlat")),
parseFloat(markers[i].getAttribute("endlng")));
var html = "<b>" + name;
var icon = customIcons || {};
var startmarker = new google.maps.Marker({
map: map,
position: startpoint,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(startmarker, map, infoWindow, html);
var endmarker = new google.maps.Marker({
map: map,
position: endpoint,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(endmarker, map, infoWindow, html);
}
});
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(startpoint, endpoint),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
});
这是XML的输出......
<markers>
<marker title="Journey" description="Lorem Ipsum..." startlat="53.403023" startlng="-2.130801" endlat="53.414257" endlng="-2.094128"/>
</markers>
LatLng
期望您想要将地图居中的点的latitude
和longtude
。 这就是为什么下面的代码不起作用。
center: new google.maps.LatLng(startpoint, endpoint),
显示地图中心两点之间的路线。 您可以尝试找到起点和终点之间的中间点。
这是java中用于计算中间点的实现,更多信息 - Haversine_formula
public static void midPoint(double lat1,double lon1,double lat2,double lon2){
double dLon = Math.toRadians(lon2 - lon1);
//convert to radians
lat1 = Math.toRadians(lat1);
lat2 = Math.toRadians(lat2);
lon1 = Math.toRadians(lon1);
double Bx = Math.cos(lat2) * Math.cos(dLon);
double By = Math.cos(lat2) * Math.sin(dLon);
double lat3 = Math.atan2(Math.sin(lat1) + Math.sin(lat2), Math.sqrt((Math.cos(lat1) + Bx) * (Math.cos(lat1) + Bx) + By * By));
double lon3 = lon1 + Math.atan2(By, Math.cos(lat1) + Bx);
//print out in degrees
System.out.println(Math.toDegrees(lat3) + " " + Math.toDegrees(lon3));
}
编辑:
Javascript实现
function middlePoint(lat1,lon1,lat2,lon2){
var dLon = toRad(lon2 - lon1);
lat1 = toRad(lat1);
lat2 = toRad(lat2);
lon1 = toRad(lon1);
var Bx = Math.cos(lat2) * Math.cos(dLon);
var By = Math.cos(lat2) * Math.sin(dLon);
var lat3 = Math.atan2(Math.sin(lat1) + Math.sin(lat2), Math.sqrt((Math.cos(lat1) + Bx) * (Math.cos(lat1) + Bx) + By * By));
var lon3 = lon1 + Math.atan2(By, Math.cos(lat1) + Bx);
var middlePoint = new Object();
middlePoint.latitude=lat3;
middlePoint.longitude=lon3;
return middlePoint;
}
function toRad(Value) {
return Value * Math.PI / 180;
}
如果使用起点和终点生成边界,则可以使地图适合显示该边界。
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 13,
mapTypeId: 'roadmap'
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(startpoint);
bounds.extend(endpoint);
map.fitBounds(bounds);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.