Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/450.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 基于解析的XML纬度和经度值将Google地图居中_Javascript_Jquery_Google Maps_Xml Parsing - Fatal编程技术网

Javascript 基于解析的XML纬度和经度值将Google地图居中

Javascript 基于解析的XML纬度和经度值将Google地图居中,javascript,jquery,google-maps,xml-parsing,Javascript,Jquery,Google Maps,Xml Parsing,这段Javascript解析一个xml文件,其中包含起点和终点的纬度和经度坐标。我可以在地图上找到标记,问题是地图不以点为中心(最终它会打电话给谷歌方向服务,在两点之间画一条路线,所以最好让地图很好地围绕两个点,而不是只以其中一个点为中心) 在使用硬编码的lat和long值创建地图的那一刻,我知道这需要更改,但我尝试输入'startpoint'和'endpoint'都没有用,地图没有加载,所以我猜我下面的做法是不正确的 jQuery(document).ready(function($

这段Javascript解析一个xml文件,其中包含起点和终点的纬度和经度坐标。我可以在地图上找到标记,问题是地图不以点为中心(最终它会打电话给谷歌方向服务,在两点之间画一条路线,所以最好让地图很好地围绕两个点,而不是只以其中一个点为中心)

在使用硬编码的lat和long值创建地图的那一刻,我知道这需要更改,但我尝试输入'startpoint'和'endpoint'都没有用,地图没有加载,所以我猜我下面的做法是不正确的

     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;

    });      
jQuery(document).ready(函数($){
下载URL(“xml.php”,函数(数据){
var xml=data.responseXML;
var markers=xml.documentElement.getElementsByTagName(“标记”);
对于(var i=0;i
这是XML的输出

<markers>
     <marker title="Journey" description="Lorem Ipsum..." startlat="53.403023" startlng="-2.130801" endlat="53.414257" endlng="-2.094128"/>
</markers> 

LatLng
expect的
纬度
longtude
,您要将地图居中的点。 这就是为什么下面的代码不起作用

 center: new google.maps.LatLng(startpoint, endpoint),
显示地图中心两点之间的路线。你可以试着找到起点和终点之间的中间点

下面是一个java实现,它可以计算中间点,更多信息-

编辑:

Javascript实现


如果使用起点和终点生成边界,则可以调整贴图以显示该边界

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);

感谢Mohammad,这无疑为我的问题提供了解决方案。不幸的是,我以前从未接触过Java,所以你的例子对我来说完全陌生。你可以用你擅长的任何语言来实现……你只需要使用这个公式。。。。。。我相信你可以在javascript中找到一些实现,所以试试看。在javascript版本中,将
Math.toRad
更改为
toRad
。还有一些缺少的
var
声明。@MichaelGeary感谢的人。。。我这么做很匆忙。。。没有注意到这个问题。再一次,geocodezip,你已经找到了王牌。谢谢,它工作得很好。
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);