javascript 如何将所有标记与 Google 地图中的路径连接起来?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7891736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to join all markers with paths in Google Maps?
提问by daGrevis
I'm new to Google Maps (API) and I need to get the following result:
我是 Google Maps (API) 的新手,我需要得到以下结果:
At the moment, I know how to render the map and place markers on it (based on longitude and latitude).
目前,我知道如何渲染地图并在其上放置标记(基于经度和纬度)。
var map;
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: new google.maps.LatLng(response[0].latitude, response[0].longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < response.length; ++i) {
new google.maps.Marker({
'map' : map,
'position' : new google.maps.LatLng(response[i].latitude, response[i].longitude),
'title' : response[i].address
});
}
Variable response
structure is like:
变量response
结构如下:
[
Object
address: "Kri?jā?a Barona iela 25, Riga, LV-1011, Latvia"
latitude: "24.1245290"
longitude: "56.9528510"
__proto__: Object
,
Object
address: "Rīgas iela 1, Tukums, Tukuma novads, LV-3101, Latvia"
latitude: "23.1630590"
longitude: "56.9663880"
__proto__: Object
]
There could be a lot of markers. I'm looking for a way to join markers with paths like in the preview image.
可能有很多标记。我正在寻找一种方法来将标记与预览图像中的路径连接起来。
I don't know for what I should search and I need your help in this, guys. Thanks in an advice!
我不知道我应该搜索什么,我需要你们的帮助,伙计们。感谢您的建议!
回答by katspaugh
An example from Google's tutorial:
谷歌教程中的一个例子:
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
Also, see the reference entry for Polylines
.
另请参阅的参考条目Polylines
。
If you don't know how to map the response object to an array of LatLng
objects, here's an example:
如果您不知道如何将响应对象映射到对象数组LatLng
,请看以下示例:
var flightPath = responseArray.map(function (item) {
return new google.maps.LatLng(item.latitude, item.longitude);
});