谷歌地图多折线 [英] google map multiple polyline
本文介绍了谷歌地图多折线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我拥有包含多个多边形的 Google地图示例。我将新的google.maps.Polygon 函数更改为折线为
new google.maps.Polyline（{
paths：arr，
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：' ＃FF0000'，
fillOpacity：0.35
}）
但它没有画线。 小提琴。另外如何将对象名称设置为infowindow内容。我尝试了
var infowindow = new google.maps.InfoWindow（{
content：i
} ）;
解决方案
google.maps.Polyline没有路径属性。更改：
新google.maps.Polyline（{
路径：arr，
strokeColor：'＃ FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：'＃FF0000'，
fillOpacity：0.35
}）
收件人：
新google .maps.Polyline（{
path：arr，
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：'＃FF0000 '，
fillOpacity：0.35
}）
程式码片段：
var map，infoWindow; function initialize（）{ var mapOptions = {zoom：5，center：new google.maps.LatLng（24.886436490787712，-70.2685546875），mapTypeId：google.maps.MapTypeId.TERRAIN}; var bounds = new google.maps.LatLngBounds（）; var polygons = []; var arr = new Array（）; var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; //定义多边形路径的LatLng坐标。 var coordinates = {feed1：[[25.774252，-80.190262]，[18.466465，-66.118292]，[32.321384，-64.75737]，[25.774252，-80.190262]]，feed2：[[26.774252，-81.190262]， [19.466465，-67.118292]，[33.321384，-65.75737]，[26.774252，-81.190262]]，feed3：[[27.774252，-82.190262]，[20.466465，-68.118292]，[34.321384，-66.75737]，[27.774252 ，-82.190262]]}; for（var i in coordinates）{arr = []; （var j = 0; j< coordinate [i] .length; j ++）{arr.push（new google.maps.LatLng（parseFloat（coordinates [i] [j] [0]），parseFloat（coordinates [i ] [j] [1]）））; bounds.extend（arr [arr.length - 1]）} //构造多边形。 polygons.push（new google.maps.Polyline（{path：arr，strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：2，fillColor：'＃FF0000'，fillOpacity：0.35}））; polygons [polygons.length - 1] .setMap（map）; var infowindow = new google.maps.InfoWindow（{content：Hello World！}）; google.maps.event.addListener（polygons [polygons.length - 1]，'click'，function（event）{infowindow.open（map）; infowindow.setPosition（event.latLng）;}）; } map.fitBounds（bounds）; //google.maps.event.addListener（arr，'click'，showArrays）; // infoWindow = new google.maps.InfoWindow（）; } / * function showArrays（event）{var contentString ='< b>百慕大三角形多边形< / b>< br>'; //替换信息窗口的内容和位置。 infoWindow.setContent（contentString）; // infoWindow.setPosition（event.latLng）; infoWindow.open（地图）; } * / google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃map-canvas {height：100％; margin：0px; < script src =https：//
I have a google map sample with multiple polygons. I changed the new google.maps.Polygon function to polyline as
new google.maps.Polyline({
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
})
But it does not drawing the lines. Fiddle here. Also how to set object name to infowindow content. I tried with
var infowindow = new google.maps.InfoWindow({
content: i
});
解决方案
A google.maps.Polyline doesn't have a paths property. Change:
new google.maps.Polyline({
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
})
To:
new google.maps.Polyline({
path: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
})
code snippet:
var map, infoWindow;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bounds = new google.maps.LatLngBounds();
var polygons = [];
var arr = new Array();
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Define the LatLng coordinates for the polygon's path.
var coordinates = {
"feed1": [
[25.774252, -80.190262],
[18.466465, -66.118292],
[32.321384, -64.75737],
[25.774252, -80.190262]
],
"feed2": [
[26.774252, -81.190262],
[19.466465, -67.118292],
[33.321384, -65.75737],
[26.774252, -81.190262]
],
"feed3": [
[27.774252, -82.190262],
[20.466465, -68.118292],
[34.321384, -66.75737],
[27.774252, -82.190262]
]
};
for (var i in coordinates) {
arr = [];
for (var j = 0; j < coordinates[i].length; j++) {
arr.push(new google.maps.LatLng(
parseFloat(coordinates[i][j][0]),
parseFloat(coordinates[i][j][1])
));
bounds.extend(arr[arr.length - 1])
}
// Construct the polygon.
polygons.push(new google.maps.Polyline({
path: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
}));
polygons[polygons.length - 1].setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Hello World!"
});
google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {
infowindow.open(map);
infowindow.setPosition(event.latLng);
});
}
map.fitBounds(bounds);
//google.maps.event.addListener(arr, 'click', showArrays);
// infoWindow = new google.maps.InfoWindow();
}
/*
function showArrays(event) {
var contentString = '<b>Bermuda Triangle polygon</b><br>';
// Replace the info window's content and position.
infoWindow.setContent(contentString);
// infoWindow.setPosition(event.latLng);
infoWindow.open(map);
} */
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
这篇关于谷歌地图多折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
