谷歌地图API多段线创建失败;未捕获类型错误:数字不是函数;

Google Maps API Polyline creation failing with "Uncaught TypeError: number is not a function"

本文关键字:错误 类型 数字 函数 API 段线 创建 失败 谷歌地图      更新时间:2023-09-26

我正在使用谷歌地图JS api进行一个django项目。基本上,这里要做的是创建一个以点为中心的地图(效果很好),绘制一组由journey变量指定的点(值由django模板替换),然后尝试在这些点之间绘制聚亚胺。(无法在JS控制台生成带有"Uncaught TypeError:数字不是函数"的折线。)

JS控制台上的回溯对我来说很难理解,尤其是因为所有的.JS文件都被挖空了。

当我记录多段线的路径属性和我要添加的坐标(如下所示)时,一切似乎都正常。我知道坐标的格式是正确的,因为我认为Marker和Polyline的位置应该采用相同的数据类型(LatLng),而且Marker工作得很好。有人知道发生了什么事吗?

var mapOptions = {
  center: { lat: 37.23112,
            lng: -122.29398
  },
  zoom: 15
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Make the line that will trace the guys route:
var polyOptions = {
  strokeColor: '#000000',
  srokeOpacity: 1.0,
  strokeWeight: 3
};
var poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Make an array of everywhere the lilguys has been. Passed into this django template as {"lat": 12, "lng": 8} objects.
var journey = [{"lat": 33.2389, "lng":-123.9349}, {"lat":32.928392, "lng":-122.29289}, {"lat":33.928982, "lng":-120.298392}];
var journey_markers = [];
// Draw all the placemarks
for (var i = 0; i < journey.length; i++) {
  var coord = journey[i];
  journey_markers.push(new google.maps.Marker({position: coord, map:map}));
  var path = poly.getPath();
  console.log(coord);
  console.log(path);
  path.push(coord);
}

谢谢!

编辑:我用中的模板变量代替了它们的评估结果。这是通过查看浏览器中的HTML源代码进行检查的,并确认不是错误的来源。

找到了答案。似乎与Markers不同,Polyine路径需要google.maps.LatLng()对象,而不是lating文字。以下修复了该问题:

...
// Draw all the placemarks
for (var i = 0; i < journey.length; i++) {
  var coord = new google.maps.LatLng(journey[i].lat, journey[i].lng);
...
相关文章: