谷歌地图多折线 [英] 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:// //maps.googleapis.com/maps/api/js\">< / script>< div;>< p>
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屋!
查看全文