如何将多个（用加号分隔）航点添加到地图 [英] How to add multiple (separated with a plus symbol) waypoints to a map

查看：92
本文介绍了如何将多个（用加号分隔）航点添加到地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

感谢 geocodezip ，我已经设法创建了一个包含路线功能和XML标记加载的地图。但还有一个问题：

我该如何为它添加航点？它们应该用加号或其他适当的符号分隔。



以下是当前的代码： 

 < script type =text / javascript> 
 //<！[CDATA [
 //全局映射变量
 var map = null; 
 var rendererOptions = {
 draggable：true 
}; 
 var directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions）;; 
 var directionsService = new google.maps.DirectionsService（）; 
 //创建标记并设置事件窗口函数的函数
函数createMarker（latlng，name，html）{
 var marker = new google.maps.Marker（{
位置：latlng，
 map：map，
 zIndex：Math.round（latlng.lat（）*  -  100000）<= 5 
}）; 
 var contentString = html; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
 }）; 
} 
 // =====请求方向===== 
函数getDirections（）{
 // ====设置步行并避开高速公路选项==== 
 var request = {}; 
 if（document.getElementById（walk）。checked）{
 request.travelMode = google.maps.DirectionsTravelMode.WALKING; 
} else {
 request.travelMode = google.maps.DirectionsTravelMode.DRIVING; 
} 
 if（document.getElementById（highways）。checked）{
 request.avoidHighways = true; 
 
 if（document.getElementById（alternatives）。checked）{
 request.provideRouteAlternatives = true; 
} 
 // ====设置开始和结束位置==== 
 var saddr = document.getElementById（saddr）。value 
 var daddr = document .getElementById（daddr）。value 
 request.origin = saddr; 
 request.destination = daddr; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
 } 
}）; 
} 
函数initialize（）{
 //创建地图
 var myOptions = {
 zoom：8，
 center：new google.maps。 LatLng（43.907787，-79.359741），
 mapTypeControl：true，
 mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
 navigationControl：true，
 mapTypeId：google。 maps.MapTypeId.ROADMAP 
} 
 map = new google.maps.Map（document.getElementById（map_canvas），
 myOptions）; 
 directionsDisplay.setMap（map）; 
 directionsDisplay.setPanel（document.getElementById（directionsPanel））; 
 google.maps.event.addListener（map，'click'，function（）{
 infowindow.close（）; 
}）; 
 //从example.xml读取数据
 if（document.getElementById（showMarkkers）。checked）{
 downloadUrl（example.xml，function（doc）{
 var xmlDoc = xmlParse（doc）; 
 var markers = xmlDoc.documentElement.getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 //获得每个标记的属性
 var lat = parseFloat（markers [i] .getAttribute（lat））; 
 var lng = parseFloat（markers [i] .getAttribute（ lng））; 
 var point = new google.maps.LatLng（lat，lng）; 
 var html = markers [i] .getAttribute（html）; 
 var label =标记[i] .getAttribute（label）; 
 //创建标记
 var marker = createMarker（point，label，html）; 
} 
}）; 
 
 //从example2.xml读取数据
 if（document.getElementById（showmarkers2）。checked）{
 downloadUrl（example2.xml，function（ （var i = 0; i< markers.length）{
 var xmlDoc = xmlParse（doc）; 
 var markers = xmlDoc.documentElement.getElementsByTagName（marker）; 
 ; i ++）{
 //获得每个标记的属性
 var lat = parseFloat（markers [i] .getAttribute（lat））; 
 var lng = parseFloat（markers [i ] .getAttribute（lng））; 
 var point = new google.maps.LatLng（lat，lng）; 
 var html = markers [i] .getAttribute（html）; 
 var label = markers [i] .getAttribute（label）; 
 //创建标记
 var marker = createMarker（point，label，html）; 
} 
}）; 
 
 
 var infowindow = new google.maps.InfoWindow（
 {
 size：new google.maps.Size（150,50）
 }）; 
 //]]> 
< / script>

这是我用来生成航点的代码，但现在无法使用：

  var via = document.getElementById（via）。value; 
 if（via）{
 so = via.split（+）
 if（so.length> 1）{
 var wpArray = []; 
 for（i = 0;（i  wpArray.push（{location：so [i]，stopover：true}）
} 
 request = {
 origin：saddr，
 destination：daddr，
 waypoints：wpArray，
 provideRouteAlternatives：true，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
 
} else {
 request = {
 origin：saddr，
 destination：daddr，
 waypoints：[{location：via，stopover：true} ]，
 provideRouteAlternatives：true，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
} 
} 
} else {
 request = {
来源：saddr，
目的地：daddr，
 provideRouteAlternatives：true，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
} 
}

编辑这个i s的工作功能：

  function getDirections（）{
 // ====设置步行并避免高速公路选项==== 
 var request = {}; 
 if（document.getElementById（walk）。checked）{
 request.travelMode = google.maps.DirectionsTravelMode.WALKING; 
} else {
 request.travelMode = google.maps.DirectionsTravelMode.DRIVING; 
 
 
 if（document.getElementById（highways）。checked）{
 request.avoidHighways = true; 
 
 
 if（document.getElementById（alternatives）。checked）{
 request.provideRouteAlternatives = true; 
} 
 
 
 // ====设置开始和结束位置==== 
 var start = document.getElementById（start）。value 
 var end = document.getElementById（end）。value 
 
 request.origin = start; 
 request.destination = end; 
 request.waypoints = via; 
 
 var so; 
 var via = document.getElementById（via）.value; （$）
 
 
 $ b if（via）{
 so = via.split（+）
 if（so.length> 1）{
 var wpArray = []; 
 for（i = 0;（i  wpArray.push（{location：so [i]，stopover：false}）
} 
 request = {
 origin：start，
 destination：end，
 waypoints：wpArray，
 provideRouteAlternatives：true，
 avoidHighways：document.getElementById（highways） .checked，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
} 
} else {
 request = {
 origin：start，
 destination：end ，
 waypoints：[{location：via，stopover：false}]，
 provideRouteAlternatives：true，
 avoidHighways：document.getElementById（highways）。checked，
 travelMode： google.maps.DirectionsTravelMode.DRIVING 
} 
} 
} else {
 request = {
 origin：start，
 destination：end，
提供路由器ernatives：true，
 avoidHighways：document.getElementById（highways）。checked，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
} 
} 
 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
} 
}）; 
}


解决方案

xml文件或其格式是什么。这里是一个例子，显示/隐藏基于他们的类别的标记（再次从迈克尔威廉姆斯的v2教程翻译）：

http://www.geocodezip.com/v3_MW_example_categories.html



（也复制如何显示/隐藏标记XML文件，而不刷新页面与其应用的部分问题）


Thanks to geocodezip , I have managed to create a map with directions functionality and XML markers loaded. There is a problem left though:

How can I add waypoints to it? They should be separated by plus symbol or something else appropriate.

Here is the current code:

<script type="text/javascript"> 
//<![CDATA[
 // global "map" variable
var map = null;
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
var contentString = html;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString); 
infowindow.open(map,marker);
});
}
// ===== request the directions =====
function getDirections() {
// ==== Set up the walk and avoid highways options ====
var request = {};
if (document.getElementById("walk").checked) {
request.travelMode = google.maps.DirectionsTravelMode.WALKING;
} else {
request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
}
if (document.getElementById("highways").checked) {
request.avoidHighways = true;
}   
if (document.getElementById("alternatives").checked) {
request.provideRouteAlternatives = true;
}   
// ==== set the start and end locations ====
var saddr = document.getElementById("saddr").value
var daddr = document.getElementById("daddr").value
request.origin = saddr;
request.destination = daddr;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787,-79.359741),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml   
if (document.getElementById("showmarkers").checked) {
downloadUrl("example.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
}
});
}
// Read the data from example2.xml   
if (document.getElementById("showmarkers2").checked) {
downloadUrl("example2.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
}
});
}
}
var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)
});  
//]]>
</script>

This is the code I have used to generate waypoints, but it's not working now:

var via = document.getElementById("via").value;
  if (via) {
      so = via.split("+")
      if (so.length > 1) {
          var wpArray = [];
          for (i=0; (i<so.length); i++) {
            wpArray.push({location: so[i], stopover:true})
          }
          request = {
            origin:saddr, 
            destination:daddr,
            waypoints: wpArray,
            provideRouteAlternatives: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      } else {
          request = {
            origin:saddr, 
            destination:daddr,
            waypoints:[{location:via, stopover:true}],
            provideRouteAlternatives: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      }
  } else {
      request = {
        origin:saddr, 
        destination:daddr,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }
  }

EDIT This is the working function:

function getDirections() {
        // ==== Set up the walk and avoid highways options ====
        var request = {};
        if (document.getElementById("walk").checked) {
           request.travelMode = google.maps.DirectionsTravelMode.WALKING;
        } else {
          request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
        }

        if (document.getElementById("highways").checked) {
           request.avoidHighways = true;
        }

        if (document.getElementById("alternatives").checked) {
           request.provideRouteAlternatives = true;
        }


        // ==== set the start and end locations ====
        var start = document.getElementById("start").value
        var end = document.getElementById("end").value

        request.origin = start;
        request.destination = end;
        request.waypoints = via;

var so;
var via = document.getElementById("via").value;



if (via) {
      so = via.split("+")
      if (so.length > 1) {
          var wpArray = [];
          for (i=0; (i<so.length); i++) {
            wpArray.push({location: so[i], stopover:false})
          }
          request = {
            origin:start, 
            destination:end,
            waypoints: wpArray,
            provideRouteAlternatives: true,
            avoidHighways: document.getElementById("highways").checked,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      } else {
          request = {
            origin:start, 
            destination:end,
            waypoints:[{location:via, stopover:false}],
            provideRouteAlternatives: true,
            avoidHighways: document.getElementById("highways").checked,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      }
  } else {
      request = {
        origin:start, 
        destination:end,
        provideRouteAlternatives: true,
        avoidHighways: document.getElementById("highways").checked,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }
  }

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

解决方案

Not sure why you have 2 xml files or what their format is. Here is an example which shows/hides markers based on their categories (again translated from Mike Williams' v2 tutorial):

http://www.geocodezip.com/v3_MW_example_categories.html

(also copied to How to show/hide markers from XML file without refreshing the page with the part of the question it applied to)

这篇关于如何将多个（用加号分隔）航点添加到地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆