Google地图,绘制带有多个标记的路线,隐藏最后一个标记以外的标记

涂抹者

我有一个谷歌地图,并使用下面的小提琴作为模板。

JSFiddle

该地图显示了38个标记,每个标记都有标准的气球图标,因此很难查看所有气球的实际绘制路径。

我只希望最后一个标记具有图标,其余的应该仅显示路径,但要根据标记进行路由。

有点像

 var stations = [
        {lat: 48.9812840, lng: 21.2171920, name: 'Station 1', marker:none},
        {lat: 48.9832841, lng: 21.2176398, name: 'Station 2', marker:none},
        {lat: 48.9856443, lng: 21.2209088, name: 'Station 3', marker:none},
        {lat: 48.9861461, lng: 21.2261563, name: 'Station 4', marker:none},
        {lat: 48.9874682, lng: 21.2294855, name: 'Station 5', marker:none},
        {lat: 48.9909244, lng: 21.2295512, name: 'Station 6', marker:balloon},

等等

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;     
    width: 100%;
    height: 100%;
}
<button onclick="for (var r of gRenderers) r.setMap(gMap);">Show line</button>

<button onclick="for (var r of gRenderers) r.setMap(null);">Hide line</button>

<div id="map"></div>
<script>
  function initMap() {
    var service = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'));
    window.gMap = map;

    // list of points
    var stations = [
        {lat: 48.9812840, lng: 21.2171920, name: 'Station 1'},
        {lat: 48.9832841, lng: 21.2176398, name: 'Station 2'},
        {lat: 48.9856443, lng: 21.2209088, name: 'Station 3'},
        {lat: 48.9861461, lng: 21.2261563, name: 'Station 4'},
        {lat: 48.9874682, lng: 21.2294855, name: 'Station 5'},
        {lat: 48.9909244, lng: 21.2295512, name: 'Station 6'},
        {lat: 48.9928871, lng: 21.2292352, name: 'Station 7'},
        {lat: 48.9921334, lng: 21.2246742, name: 'Station 8'},
        {lat: 48.9943196, lng: 21.2234792, name: 'Station 9'},
        {lat: 48.9966345, lng: 21.2221262, name: 'Station 10'},
        {lat: 48.9981191, lng: 21.2271386, name: 'Station 11'},
        {lat: 49.0009168, lng: 21.2359527, name: 'Station 12'},
        {lat: 49.0017950, lng: 21.2392890, name: 'Station 13'},
        {lat: 48.9991912, lng: 21.2398272, name: 'Station 14'},
        {lat: 48.9959850, lng: 21.2418410, name: 'Station 15'},
        {lat: 48.9931772, lng: 21.2453901, name: 'Station 16'},
        {lat: 48.9963512, lng: 21.2525850, name: 'Station 17'},
        {lat: 48.9985134, lng: 21.2508423, name: 'Station 18'},
        {lat: 49.0085000, lng: 21.2508000, name: 'Station 19'},
        {lat: 49.0093000, lng: 21.2528000, name: 'Station 20'},
        {lat: 49.0103000, lng: 21.2560000, name: 'Station 21'},
        {lat: 49.0112000, lng: 21.2590000, name: 'Station 22'},
        {lat: 49.0124000, lng: 21.2620000, name: 'Station 23'},
        {lat: 49.0135000, lng: 21.2650000, name: 'Station 24'},
        {lat: 49.0149000, lng: 21.2680000, name: 'Station 25'},
        {lat: 49.0171000, lng: 21.2710000, name: 'Station 26'},
        {lat: 49.0198000, lng: 21.2740000, name: 'Station 27'},
        {lat: 49.0305000, lng: 21.3000000, name: 'Station 28'},
        // ... as many other stations as you need
    ];

    // Zoom and center map automatically by stations (each station will be in visible map area)
    var lngs = stations.map(function(station) { return station.lng; });
    var lats = stations.map(function(station) { return station.lat; });
    map.fitBounds({
        west: Math.min.apply(null, lngs),
        east: Math.max.apply(null, lngs),
        north: Math.min.apply(null, lats),
        south: Math.max.apply(null, lats),
    });

    // Show stations on the map as markers
    for (var i = 0; i < stations.length; i++) {
        new google.maps.Marker({
            position: stations[i],
            map: map,
            title: stations[i].name
        });
    }

    // Divide route to several parts because max stations limit is 25 (23 waypoints + 1 origin + 1 destination)
    for (var i = 0, parts = [], max = 8 - 1; i < stations.length; i = i + max)
        parts.push(stations.slice(i, i + max + 1));

    // Service callback to process service results
    var service_callback = function(response, status) {
        if (status != 'OK') {
            console.log('Directions request failed due to ' + status);
            return;
        }
        var renderer = new google.maps.DirectionsRenderer;
        if (!window.gRenderers)
                window.gRenderers = [];
        window.gRenderers.push(renderer);
        renderer.setMap(map);
        renderer.setOptions({ suppressMarkers: true, preserveViewport: true });
        renderer.setDirections(response);
    };

    // Send requests to service to get route (for stations count <= 25 only one request will be sent)
    for (var i = 0; i < parts.length; i++) {
        // Waypoints does not include first station (origin) and last station (destination)
        var waypoints = [];
        for (var j = 1; j < parts[i].length - 1; j++)
            waypoints.push({location: parts[i][j], stopover: false});
        // Service options
        var service_options = {
            origin: parts[i][0],
            destination: parts[i][parts[i].length - 1],
            waypoints: waypoints,
            travelMode: 'WALKING'
        };
        // Send request
        service.route(service_options, service_callback);
    }
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

地理编码

如果只希望显示最后一个标记,则仅将最后一个标记添加到地图。

    // Show stations on the map as markers
    for (var i = 0; i < stations.length; i++) {
        new google.maps.Marker({
            position: stations[i],
            map: i==(stations.length-1) ? map : null,
            title: stations[i].name
        });
    }

概念证明

生成的地图的屏幕截图

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 90%;
  width: 100%;
}
<button onclick="for (var r of gRenderers) r.setMap(gMap);">Show line</button>

<button onclick="for (var r of gRenderers) r.setMap(null);">Hide line</button>

<div id="map"></div>
<script>
  function initMap() {
    var service = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'));
    window.gMap = map;

    // list of points
    var stations = [
        {lat: 48.9812840, lng: 21.2171920, name: 'Station 1'},
        {lat: 48.9832841, lng: 21.2176398, name: 'Station 2'},
        {lat: 48.9856443, lng: 21.2209088, name: 'Station 3'},
        {lat: 48.9861461, lng: 21.2261563, name: 'Station 4'},
        {lat: 48.9874682, lng: 21.2294855, name: 'Station 5'},
        {lat: 48.9909244, lng: 21.2295512, name: 'Station 6'},
        {lat: 48.9928871, lng: 21.2292352, name: 'Station 7'},
        {lat: 48.9921334, lng: 21.2246742, name: 'Station 8'},
        {lat: 48.9943196, lng: 21.2234792, name: 'Station 9'},
        {lat: 48.9966345, lng: 21.2221262, name: 'Station 10'},
        {lat: 48.9981191, lng: 21.2271386, name: 'Station 11'},
        {lat: 49.0009168, lng: 21.2359527, name: 'Station 12'},
        {lat: 49.0017950, lng: 21.2392890, name: 'Station 13'},
        {lat: 48.9991912, lng: 21.2398272, name: 'Station 14'},
        {lat: 48.9959850, lng: 21.2418410, name: 'Station 15'},
        {lat: 48.9931772, lng: 21.2453901, name: 'Station 16'},
        {lat: 48.9963512, lng: 21.2525850, name: 'Station 17'},
        {lat: 48.9985134, lng: 21.2508423, name: 'Station 18'},
        {lat: 49.0085000, lng: 21.2508000, name: 'Station 19'},
        {lat: 49.0093000, lng: 21.2528000, name: 'Station 20'},
        {lat: 49.0103000, lng: 21.2560000, name: 'Station 21'},
        {lat: 49.0112000, lng: 21.2590000, name: 'Station 22'},
        {lat: 49.0124000, lng: 21.2620000, name: 'Station 23'},
        {lat: 49.0135000, lng: 21.2650000, name: 'Station 24'},
        {lat: 49.0149000, lng: 21.2680000, name: 'Station 25'},
        {lat: 49.0171000, lng: 21.2710000, name: 'Station 26'},
        {lat: 49.0198000, lng: 21.2740000, name: 'Station 27'},
        {lat: 49.0305000, lng: 21.3000000, name: 'Station 28'},
        // ... as many other stations as you need
    ];


    // Zoom and center map automatically by stations (each station will be in visible map area)
    var lngs = stations.map(function(station) {
      return station.lng;
    });
    var lats = stations.map(function(station) {
      return station.lat;
    });
    map.fitBounds({
      west: Math.min.apply(null, lngs),
      east: Math.max.apply(null, lngs),
      north: Math.min.apply(null, lats),
      south: Math.max.apply(null, lats),
    });

    // Show stations on the map as markers
    for (var i = 0; i < stations.length; i++) {
      new google.maps.Marker({
        position: stations[i],
        map: i == (stations.length - 1) ? map : null,
        title: stations[i].name
      });
    }

    // Divide route to several parts because max stations limit is 25 (23 waypoints + 1 origin + 1 destination)
    for (var i = 0, parts = [], max = 8 - 1; i < stations.length; i = i + max)
      parts.push(stations.slice(i, i + max + 1));

    // Service callback to process service results
    var service_callback = function(response, status) {
      if (status != 'OK') {
        console.log('Directions request failed due to ' + status);
        return;
      }
      var renderer = new google.maps.DirectionsRenderer;
      if (!window.gRenderers)
        window.gRenderers = [];
      window.gRenderers.push(renderer);
      renderer.setMap(map);
      renderer.setOptions({
        suppressMarkers: true,
        preserveViewport: true
      });
      renderer.setDirections(response);
    };

    // Send requests to service to get route (for stations count <= 25 only one request will be sent)
    for (var i = 0; i < parts.length; i++) {
      // Waypoints does not include first station (origin) and last station (destination)
      var waypoints = [];
      for (var j = 1; j < parts[i].length - 1; j++)
        waypoints.push({
          location: parts[i][j],
          stopover: false
        });
      // Service options
      var service_options = {
        origin: parts[i][0],
        destination: parts[i][parts[i].length - 1],
        waypoints: waypoints,
        travelMode: 'WALKING'
      };
      // Send request
      service.route(service_options, service_callback);
    }
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在带有多个标记的Google地图中停止标记动画

带有谷歌地图 API 路线的多个标记,按距离绘制

使用 JSON 的 Google 地图标记。地图上仅显示循环中的最后一个标记

页面上带有标记的多个Google地图

Google地图上的多个标记带有不同的图标?

有没有办法从多个标记中设置一个地图标记的 z-index?

同一页上有多个带有标记的Google地图

Google在一个国家/地区标记地图

如何在Google地图中的两个标记之间绘制路线

通过Asp.net在Google地图的一个信息框中合并多个标记的内容

带有锚标记的最后一个类型在CSS中不起作用

使用 strtok,最后一个标记带有行分隔符

在Google Map iOS上使用多个标记绘制路线

带有多个标记的AngularJS Google Map

Google地图上的多个标记

当最后一个标记是可选的时,如何在正则表达式中捕获除最后一个标记之外的所有标记

谷歌地图反应只显示状态数组中最后一个渲染对象的标记

在地图中的多个标记周围绘制圆圈

在地图上显示多个标记时,单击标记时如何只打开一个信息窗口?

仅在具有多个地图的网络中的最后一张地图上显示地图标记

多个标记之间的路线

Google带有多个标记的地图:在MarkerClick上创建新的活动

绘制地点标记和路径Google地图

Google 地图 - 隐藏目的地标记

带有服务器中数字标记的Google地图

带有css圆角的Google地图自定义标记

带有自定义标记CSS动画的Google地图

BeautifulSoup-从标记而不是第一个标记中获取所有子标记

谷歌地图多个标记链接到同一个网址