如何在谷歌地图上动态绘制折线？

Question

我无法在谷歌地图上绘制折线。我正在动态获取值。

var flightPlanCoordinates=[];
n = "new google.maps.LatLng(";
q = ")";
var flightPlanCoordinates = new Array();
for(i=0;i<len;i++)
{  

  o =n+r[i].split(',')[0]+","+r[i].split(',')[1]+q;

  flightPlanCoordinates.push(o);   

}   


var flightPath = new google.maps.Polyline({
 path: flightPlanCoordinates,
 geodesic: true,
 strokeColor: '#FF0000',
 strokeOpacity: 1.0,
 strokeWeight: 2
 });

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

我有一个像这样的列表:r=['13.034056,80.250489|13.036324,80.248538|13.026394,80.237562']。我遇到了上述部分的问题，但是我可以静态地传递值并获得我期望的折线。谢谢提前。

- Nirmala Sudhir

Answer 1

你正在创建一个字符串数组（"new google.maps.LatLng(coor1,coord2)"），而不是 google.maps.LatLng 对象的数组。

这对我有效。

var r=['13.034056,80.250489|13.036324,80.248538|13.026394,80.237562'];
var coordinates = r[0].split("|");
var flightPlanCoordinates = new Array();
for(i=0;i<coordinates.length;i++)
{  
  var point =new google.maps.LatLng(coordinates[i].split(',')[0],coordinates[i].split(',')[1]);
  flightPlanCoordinates.push(point);   
}   


var flightPath = new google.maps.Polyline({
 path: flightPlanCoordinates,
 geodesic: true,
 strokeColor: '#FF0000',
 strokeOpacity: 1.0,
 strokeWeight: 2
 });

flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

示例

代码片段:

function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(0, -180),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

var r=['13.034056,80.250489|13.036324,80.248538|13.026394,80.237562'];
var coordinates = r[0].split("|");
var flightPlanCoordinates = new Array();
var bounds = new google.maps.LatLngBounds();
for(i=0;i<coordinates.length;i++)
{  
  var point =new google.maps.LatLng(coordinates[i].split(',')[0],coordinates[i].split(',')[1]);
  bounds.extend(point);
  flightPlanCoordinates.push(point);   
}   


var flightPath = new google.maps.Polyline({
 path: flightPlanCoordinates,
 geodesic: true,
 strokeColor: '#FF0000',
 strokeOpacity: 1.0,
 strokeWeight: 2
 });

flightPath.setMap(map);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

- geocodezip