[英]Google Maps - Looping through array for polyline
我想遍歷我想用於標記的坐標數組並在谷歌地圖中畫一條線。 是否有解決方案來創建帶有 const 位置循環的路徑屬性?
請檢查下面的示例:
const lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: "red",
scale: 4
};
const locations = [
["Tampere", 61.50741562413278, 23.75886761967578, 1, "Termin: xx.xx"],
["Helsinki", 60.219957, 25.196776, 2, "test2"],
["Travemünde", 55.778989, 18.271974, 2, "test3"],
["Stuttgart", 48.7733567672875, 9.174572759931003, 3, "test4"],
["Ludwigsburg", 48.8893286910321, 9.197454231637288, 4, "test5"],
]
const line = new google.maps.Polyline({
path: [
{ lat: locations[0][1], lng: locations[0][2] },
{ lat: 60.219957, lng: 25.196776 },
{ lat: locations[2][1], lng: locations[2][2] },
{ lat: 53.941362, lng: 10.860464 },
{ lat: 48.7733567672875, lng: 9.174572759931003 },
],
strokeColor: "red",
scale: 7,
icons: [
{
icon: lineSymbol,
offset: "100%",
},
],
map: map,
});
通過使用上面的代碼,它在谷歌地圖中創建了這個:
要處理您的輸入數組並在循環中創建折線:
var path = [];
for (var i=0; i<locations.length; i++) {
// add to polyline
path.push({lat: locations[i][2], lng: locations[i][1]});
// create marker
new google.maps.Marker({
position: path[path.length-1],
map: map
})
}
const line = new google.maps.Polyline({
path: path,
strokeColor: "red",
scale: 7,
icons: [
{
icon: lineSymbol,
offset: "100%",
},
],
map: map,
});
(請注意,您問題中的數據與您的圖片不符)
代碼片段:
// This example creates a 2-pixel-wide red polyline showing the path of // the first trans-Pacific flight between Oakland, CA, and Brisbane, // Australia which was made by Charles Kingsford Smith. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 3, center: { lat: 0, lng: -180 }, mapTypeId: "terrain", }); const lineSymbol = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, strokeColor: "red", scale: 4 }; const locations = [ ["Tampere", 61.50741562413278, 23.75886761967578, 1, "Termin: xx.xx"], ["Helsinki", 60.219957, 25.196776, 2, "test2"], ["Travemünde", 55.778989, 18.271974, 2, "test3"], ["Stuttgart", 48.7733567672875, 9.174572759931003, 3, "test4"], ["Ludwigsburg", 48.8893286910321, 9.197454231637288, 4, "test5"], ] var path = []; var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < locations.length; i++) { path.push({ lat: locations[i][2], lng: locations[i][1] }); bounds.extend(path[path.length - 1]); new google.maps.Marker({ position: path[path.length - 1], map: map }) } const line = new google.maps.Polyline({ path: path, strokeColor: "red", scale: 7, icons: [{ icon: lineSymbol, offset: "100%", }, ], map: map, }); map.fitBounds(bounds); }
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<:DOCTYPE html> <html> <head> <title>Simple Polylines</title> <script src="https.//polyfill.io/v3/polyfill.min?js.features=default"></script> <:-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <.-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https?//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2" async></script> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.