Google api v3在客户道路上显示附近的标记 [英] Google api v3 show nearby markers on customer road

问题描述

我怎样才能在我选择使用Google api v3的道路上显示附近的标记（它们是预定义的，但对于整个地图是隐藏的）（例如<10>） / strong>我使用路线服务

HTML：

 < div id =panel> 
< b> start：< / b> 
< input type =textid =startname =startmaxlength =30onchange =calcRoute（）; /> 
< b>结束：< / b> 
< input type =textid =endname =endmaxlength =30onchange =calcRoute（）; /> 
< / div> 
< div id =map>< / div> 
  

JavaScript：

  var directionsDisplay; 
 var directionsService = new google.maps.DirectionsService（）; 
 var map; 
 
函数initialize（）{
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 var chicago = new google.maps.LatLng（41.891224，-87.638675）; 
 var mapOptions = {
 zoom：7，
 center：chicago 
} 
 
 map = new google.maps.Map（document.getElementById（' map'），mapOptions）; 
 directionsDisplay.setMap（map）; 
 
 / * ===标记=== * / 
 var locations = [
 ['1'，40.577651，-82.200443]，
 ['2' ，40.760976，-93.911868]，
 ['3'，39.110017，-111.116458]，
 ['4'，27.036116，-81.717045]，
 ['5'，34.104058，-117.444583 ]，
 ['6'，44.790790，-121.443607]，
]; 
 
 var marker，i; 
 
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 map：map，
 title：locations [i] [0]，
 position：new google.maps.LatLng（locations [i] [1]，locations [i] [2]），
 // visible：false， // true为所有，但隐藏
图标：'img / the_icon.png'
}）; 
 
 
 
 
 $ b函数calcRoute（）{
 var start = document.getElementById（'start'）。value; 
 var end = document.getElementById（'end'）。value; 
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.TravelMode.DRIVING 
}; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
 } 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
  

解决方案

NY to LA：

使用RouteBoxer的示例小提琴

 函数calcRoute（）{
 //清除地图中之前的任何路线框
 clearBoxes（ ）; 
 
 //将距离转换为从英里到公里的路线框中的距离
 distance = 20 * 1.609344; 
 
 var start = document.getElementById（'start'）。value; 
 var end = document.getElementById（'end'）。value; 
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.TravelMode.DRIVING 
}; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
 //围绕第一条路径的概述路径框
 var path = response.routes [0] .overview_path; 
 var boxes = routeBoxer.box（path，distance）; 
 drawBoxes（boxes ）; 
} else alert（Directions requests failed：+ status）; 
}）; 
 
 
 //在地图上绘制多行框作为多段线
 function drawBoxes（boxes）{
 boxpolys = new Array（boxes.length）; 
 for（var i = 0; i< boxes.length; i ++）{
 boxpolys [i] = new google.maps.Rectangle（{
 bounds：boxes [i]，
 fillOpacity：0，
 strokeOpacity：1.0，
 strokeColor：'＃000000'，
 strokeWeight：1，
 map：map 
}）; 
 for（var j = 0; j  if（boxes [i] .contains（gmarkers [j] .getPosition（）））
 gmarkers [j ] .setMap（地图）; 
} 
} 
} 
  

How can I show only the markers (they are predefined, but hidden for the whole map), which are nearby (may by radius of 10mile or 20mile) to the road I choose using Google api v3 for example I use Directions service

HTML:

<div id="panel">
   <b>start: </b>
   <input type="text" id="start" name="start" maxlength="30" onchange="calcRoute();" />
   <b>end: </b>
   <input type="text" id="end" name="end" maxlength="30" onchange="calcRoute();" />
</div> 
<div id="map"></div>

JavaScript:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();
   var chicago = new google.maps.LatLng(41.891224, -87.638675);
   var mapOptions = {
     zoom:7,
     center: chicago
}

map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);

/* === markers === */
var locations = [
  ['1', 40.577651, -82.200443],
  ['2', 40.760976, -93.911868],
  ['3', 39.110017, -111.116458],
  ['4', 27.036116, -81.717045],
  ['5', 34.104058, -117.444583],
  ['6', 44.790790, -121.443607],
];

var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
       map: map,
       title: locations[i][0],
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       //visible: false,  //true for all, but hidden
       icon:'img/the_icon.png'
    });
}   

}


function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
  origin:start,
  destination:end,
  travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
  }
});
}

google.maps.event.addDomListener(window, 'load', initialize);

解决方案

You have 2 markers within 20 miles of a route from NY to LA:

example fiddle using RouteBoxer

function calcRoute() {
  // Clear any previous route boxes from the map
  clearBoxes();

  // Convert the distance to box around the route from miles to km
  distance = 20 * 1.609344;

    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            // Box around the overview path of the first route
            var path = response.routes[0].overview_path;
            var boxes = routeBoxer.box(path, distance);
            drawBoxes(boxes);
        } else alert("Directions request failed: " + status);
    });
}

// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
  boxpolys = new Array(boxes.length);
  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 1,
      map: map
    });
      for (var j=0; j< gmarkers.length; j++) {
          if (boxes[i].contains(gmarkers[j].getPosition()))
              gmarkers[j].setMap(map);
      }
  }
}

这篇关于Google api v3在客户道路上显示附近的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！