谷歌地图API - 在数组中使用Lat Lng坐标绘制折线飞行路径

Google Maps API - Drawing PolylineFlight Path with Lat Lng coordinates in a array

本文关键字：坐标 Lng 绘制 折线 路径 飞行 Lat API 数组 谷歌地图      更新时间：2023-09-26

关于如何在标记之间绘制折线的任何想法，其中纬度 lng 坐标在数组中。

数组位置包含坐标主页和其他位置。我能够使用数组中的坐标放置标记，接下来我需要做的是在主页 ->位置 1、主页 ->位置 2 之间做折线......等等。

--------------------------
<script
var locations =[
            //Starting Point is "Home", and links to other locations"//
            ['Home', 37.774930, -122.419416],
            ['Location-1', 35.689487, 139.691706],
            ['Location-2', 48.856614, 2.352222],
            ['Location-3', -33.867487, 151.206990]
            ]   
function initMap() {
    var myLatLng = {lat: 12.363, lng: -131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {lat:0,lng:0}
    }); 
    var markers = new Array();
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        title:locations[i][0],
        map: map
        })
    }
    if (i > 0){
    var startpoint = {"lat": locations[0][1], "long": locations[0][2]};
    var endpoint = {"lat": locations[i][1], "long": locations[i][2]};
    var locationlinks = [   
        new google.maps.LatLng(startpoint.lat, startpoint.long),
        new google.maps.LatLng(endpoint.lat, endpoint.long)
    ];
    var sitepath = new google.maps.Polyline({
        path: locationlinks,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    };
    sitepath.setMap(map);
}   
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBX8Q6FDpU0K9nkVCN7PpxSFybF-2FQem0&callback=initMap"></script>

作为测试更改，位置 [i][1]、[i][2] 到特定的数组对象有效，因此似乎变量可能不适用于数组对象。

var 端点 = {"纬度"： 位置[2][

1]， "长"： 位置[2][2]};

你很接近。您需要在标记创建循环内移动if i > 0测试。我发现使用标记来检索折线开始和结束的坐标更简单。

概念验证小提琴

代码片段： 

var locations = [
  //Starting Point is "Home", and links to other locations"//
  ['Home', 37.774930, -122.419416],
  ['Location-1', 35.689487, 139.691706],
  ['Location-2', 48.856614, 2.352222],
  ['Location-3', -33.867487, 151.206990]
]
function initMap() {
  var myLatLng = {
    lat: 12.363,
    lng: -131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {
      lat: 0,
      lng: 0
    }
  });
  var markers = [];
  var bounds = new google.maps.LatLngBounds();
  // Add the markers and infowindows to the map
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      title: locations[i][0],
      map: map
    })
    markers.push(marker); // push the marker onto the array
    bounds.extend(marker.getPosition());
    if (i > 0) { // move this inside the marker creation loop
      var sitepath = new google.maps.Polyline({
        // use the markers in for the coordinates
        path: [markers[0].getPosition(), marker.getPosition()],
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
    }
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

对于任何使用这个伟大的 react-maps 实现的人，请使用：

    <GoogleMap
        ...props, markers, etc...
        <Polyline
            path = {[{ lat: lat, lng: lng },{ lat: lat, lng: lng }]}
            options={{
                geodesic: true,
                strokeColor: '#0c3351',
                strokeOpacity: 1.0,
                strokeWeight: 2
            }}
        />
   </GoogleMap>
相关文章：