javascript - 使用坐标中的多边形创建静态谷歌地图图像

Question

基于Google API转换为静态 map https://developers.google.com/maps/documentation/static-maps/intro

谷歌给出了这个 url，用于从 url 制作静态 map 图像作为示例:

https://maps.googleapis.com/maps/api/staticmap?path=color:0xff0000ff%7Cweight:5%7C40.737102,-73.990318%7C40.749825,-73.987963%7C40.752946,-73.987384%7C40.755823,-73.986397&size=512x512

如您所见，每个坐标都由“%7C”分隔，即“|”。

我有一个坐标数组(从表单文本字段中提取)，它在谷歌地图js代码中创建一个多边形:请参阅:https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays

for (var i = 0; i < values["coords"].length; i++) {
var mycoords = values["coords"][i].lat + ", " + values["coords"][i].lng;

}

如何合并数组以便在静态图像 URL 中使用？

Answer 1

我假设我可以做这样的事情:

var mergeCoords;
var gmapImgSrc;

for (var i = 0; i < values["coords"].length; i++) {
var mycoords = values["coords"][i].lat + ", " + values["coords"][i].lng;

}
        
mergeCoords = mycoords.join("%7C");
        
gmapImgSrc = "https://maps.googleapis.com/maps/api/staticmap?path=color:0xff0000ff%7Cweight:5%7C" + mergeCoords + "&size=512x512";