Question

我正在尝试在我的页面上动态渲染折线。这是我的javascript函数，它打算这样做：

function decodePath(){
var pathArray=[];
window.alert(("here!!!"));
pathArray=[
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
];

var flightPath = new google.maps.Polyline({
path: pathArray,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly = new google.maps.Polyline(flightPath);
poly.setMap(map);
}

附上上述功能的按钮是：

<input type="button" onclick="decodePath();" value="Decode Path"/>

渲染地图的div是：

<div id="map"></div>

以下是我的初始化方法：

function initialize() {
  var rendererOptions = {
    draggable: true
  };    

  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

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

我研究了谷歌地图apis https://developers.google.com/maps/documentation/javascript/examples/,https://developers.google.com/maps/documentation/javascript/reference，特别是我正在尝试的是基于this的例子。只有我想动态添加折线。那么为什么路径没有显示在地图上呢？

Answer 1

您没有将地图居中在折线上，因此您无法看到它。将下面的代码添加到“DecodePath”函数中，使地图在折线上居中。

  var bounds = new google.maps.LatLngBounds();
  for (var i=0; i<pathArray.length;i++){
    bounds.extend(pathArray[i]);
  }
  map.fitBounds(bounds);

无法在Google地图上绘制折线

1 个答案: