要在Google地图上显示100个地址之间的方向 [英] Want to Display Direction Between 100 Address on Google Maps

问题描述

我想在Google地图上显示约100个地址的优化路线。我已经搜索过，但Google在免费提供的每个请求中只有8个地址，在Paid API中只提供了23个地址。比我看到一个网站使用无限制地址做同样的事情，并命名为Route4Me。

现在我已经使用lati和longi优化了所有地址。我只想在Google地图上显示使用这些数据的路线。

在Google地图中，这种情况并不是精确到从A路由到B路。我想在路线上映射路线超过50个地址，而谷歌不提供这些地址。所以我想要不同的解决方案。

可以请您提供解决方案吗？

解决方案 c $ c> [
{
lat：36，
lng：-80
}，
{
lat：37，
ng ：-81
}
]

然后您可以使用循环来获取使用Directions API在各个位置之间的多段线，然后将多段线打印到地图。

  var map; 
 var director; 
 
函数initialize（）{
 var mapOptions = {
 center：{lat：-34.397，lng：150.644}，
 zoom：8 
} ; 
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 director = new google.maps.DirectionsService（）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
 var json = [{lat：36，lng：-80}，{lat：37，lng：-81} ......]; //使用Ajax加载，复制并粘贴到字符串等。
 var pts = json.map（function（a）{return new google.maps.LatLng（a.lat，a.lng0）}）; 
 
 var polylines = []; 
 
函数get（start，end，delay）{
 setTimeout（function（）{
 director.route（{
 origin：start，
 destination ：end，
 travelMode：google.maps.TravelMode.DRIVING //或者任何想要的模式
}，函数（结果，状态）{
 if（status ==='OK'） {
 var routePts = [] 
 routePts = routePts.concat.apply（routePts，results [0] .routes [0] .legs [0] .steps.map（function（a）{return a ）; 
 polylines.push（new google.maps.Polyline（{
 path：routePts，
 map：map 
}））; 
} 
}）; 
}，延迟）; 
 
 
函数putToMap（）{
 for（var i = 0; i< pts.length-1; i ++）{
 get（pts [i] ，pts [i + 1]，i * 200）; 
 var m = new google.maps.Marker（{
 position：pts [i]，
 map：map 
}）; 
 
 var m = new google.maps.Marker（{
 position：pts [pts.length-1]，
 map：map 
}）; 
} 
  

希望这可以适当地阅读和简化以达到您想要的效果。如果我是正确的，你已经优化了你的点，并以某种类型的JSON存储。由于我不确切知道你的JSON是如何配置的，我给出了一个通用的例子。它将需要根据你的情况进行更新。

基本上，它所做的是取所有点，并在超时后获取它们的方向。如果时间较短，您可以将航点整合到此。我选择不出于演示目的。它将路线的多段线添加到多段线阵列（用于存储），并将其绘制到地图上。它也同时在地图上绘制一个标记。

I want to display optimize route for about 100 addresses on the Google maps. I have searched for that but Google gives only 8 addresses per request in free and 23 addresses in Paid API. Than I saw one website who is doing same thing using unlimited address and named "Route4Me".

The case is now I have all addresses's lati and longi in optimize manner. I just want to show a route using these data on Google maps.

This situation is not exact as to route from A to B in Google Maps. I want to map route more than 50 addresses in route on maps which thing google does not provide. So I want different solution.

can you please provide me a solution ?

解决方案

If you already have a pre-optimized list of 100 addresses stored in JSON data like this (as you say you do):

[
  {
    lat:36,
    lng:-80
  },
  {
    lat:37,
    lng:-81
  }
]

then you can use a loop to get the polylines between each of these locations using the Directions API, and then print the polylines to the map.

var map;
var director;

function initialize() {
  var mapOptions = {
    center: { lat: -34.397, lng: 150.644},
    zoom: 8
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  director = new google.maps.DirectionsService();
}
google.maps.event.addDomListener(window, 'load', initialize);

var json = [{lat:36, lng:-80}, {lat:37, lng:-81} ...... ]; //loaded using Ajax, copy and pasted to string, etc.
var pts = json.map(function(a){return new google.maps.LatLng(a.lat, a.lng0)});

var polylines = [];

function get(start, end, delay){
  setTimeout(function(){
    director.route({
      origin:start,
      destination:end,
      travelMode:google.maps.TravelMode.DRIVING //or whatever mode you want
    }, function(results, status){
      if(status === 'OK'){
        var routePts = []
        routePts = routePts.concat.apply(routePts, results[0].routes[0].legs[0].steps.map(function(a){return a.path}));
        polylines.push(new google.maps.Polyline({
          path:routePts,
          map:map
        }));
      }
    });
  }, delay);
}

function putToMap(){
  for(var i=0; i<pts.length-1; i++){
    get(pts[i], pts[i+1], i*200);
    var m = new google.maps.Marker({
      position:pts[i],
      map:map
    });
  }
  var m = new google.maps.Marker({
    position:pts[pts.length-1],
    map:map
  });
}

Hopefully this will be appropriately readable and streamlined enough to do what you want. If I am correct, you already have your points optimized, and stored in some sort of JSON. Since I do not know exactly how your JSON is configured, I gave a general example. It will need to be updated based on how yours is.

Essentially, what it does is take all the points, and get the directions for them after a timeout. For less time, you can integrate waypoints into this. I chose not to for demonstration purposes. It adds the route's polyline to the polylines array (for storage), and also draws it to the map. It also draws a marker to the map at the same time.

这篇关于要在Google地图上显示100个地址之间的方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！