0

我正在尝试在我的页面上动态呈现折线。这是我打算这样做的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);

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

4

1 回答 1

1

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

  var bounds = new google.maps.LatLngBounds();
  for (var i=0; i<pathArray.length;i++){
    bounds.extend(pathArray[i]);
  }
  map.fitBounds(bounds);
于 2013-07-02T04:14:24.097 回答