0

这段 Javascript 解析一个 xml 文件，其中包含起点和终点的纬度和经度坐标。我可以很好地在地图上找到标记，我遇到的问题是地图没有以点为中心（最终它会调用 Google Directions Service 并在两点之间绘制一条路线，所以最好让地图很好地围绕两个点而不是仅仅以其中一个点为中心）。

目前地图是使用硬编码的 lat 和 long 值创建的，所以我知道需要更改，但我尝试输入“起点”和“终点”无济于事，地图无法加载，所以我猜我在下面做的方式是不正确的。

     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>
4

2 回答 2

1

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;
}
于 2013-03-30T19:07:57.827 回答
1

如果您使用起点和终点生成边界，则可以调整地图以显示该边界。

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);
于 2013-03-30T21:04:46.613 回答