Google地图infowindow位置 [英] Google map infowindow position
本文介绍了Google地图infowindow位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是包含三个多边形的示例谷歌地图。我将每个多边形的infowindow设置为，
for（var i坐标）{
arr = [] ;
for（var j = 0; j< coordinates [i] .length; j ++）{
arr.push（new google.maps.LatLng（
parseFloat（coordinates
parseFloat（coordinates [i] [j] [1]）$ b $ b））;
bounds.extend（arr [arr.length-1]）$ b $ b}
//构造多边形。
polygons.push（new google.maps.Polygon（{
paths：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.length-1]，'click'，function（event）{
infowindow.open（map）;
infoWindow .setPosition（event.latLng）;
}）;
}
但infowindow显示在左上角位置。如何在单击多边形的中心设置它？
解决方案
两个问题：
-
您的点击侦听器代码中存在拼写错误，javascript区分大小写，
infowindow和infoWindow是不同的对象，所以你没有正确设置infowindow的位置。
infowindow 。开（地图）;
infoWindow.setPosition（event.latLng）;
-
您目前将infowindow放置在点击
infoWindow.setPosition（event.latLng）;。
如果你想让infowindow进入多边形边界的中心，你需要把它放在那里：
代码段：
var map，infoWindow; var infoWindow = new google.maps.InfoWindow（{content：Hello World！}）; 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）; for（var i in coordinates）{arr = []; var polyBounds = new google.maps.LatLngBounds（）; （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]）; polyBounds.extend（arr [arr.length - 1]）; } var IWpoint = polyBounds.getCenter（）; //构造多边形。 polygons.push（new google.maps.Polygon（{paths：arr，strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：2，fillColor：'＃FF0000'，fillOpacity：0.35，IWpoint：IWpoint}））; polygons [polygons.length - 1] .setMap（map）; var centerMark = new google.maps.Marker（{map：map，position：IWpoint，icon：{url：https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png，anchor： new google.maps.Point（3.5，3.5），size：new google.maps.Size（7，7）}，title：polygon+ i}）; google.maps.event.addListener（polygons [polygons.length - 1]，'click'，function（event）{infoWindow.setPosition（this.IWpoint）; infoWindow.open（map）;}）; }定义多边形路径的LatLng坐标。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]]};html，body，＃map-canvas {height：100％; margin：0px;< script src =https：//
//从http://stackoverflow.com/questions/9692448/how-can-you-find-the-centroid-of -a-concave-irregular-polygon-in-javascript
function get_polygon_centroid（pts）{
var first = pts [0]，last = pts [pts.length-1]; （first.lat（）！= last.lat（）|| first.lng（）！= last.lng（））pts.push（first）;
if（first.lat
var twicearea = 0，
x = 0，y = 0，
nPts = pts.length，
p1，p2，f; （var i = 0，j = nPts-1; i< nPts; j = i ++）{
p1 = pts [i]; p2 = pts [j];
f = p1.lat（）* p2.lng（） - p2.lat（）* p1.lng（）;
两次地区+ = f;
x + =（p1.lng（）+ p2.lng（））* f;
y + =（p1.lat（）+ p2.lat（））* f;
}
f =两次地区* 3;
返回新的google.maps.LatLng（y / f，x / f）;
}
Here is a sample google map with three polygons. I am setting the infowindow for each polygon as,
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.Polygon({
paths: 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);
});
}
But the infowindow is showing at the top left position. How can I set it on the center of clicked polygon?
解决方案
Two issues:
There is a typo in your click listener code, javascript is case sensitive,
infowindowandinfoWindoware different objects, so you are not setting the position of the infowindow correctly.infowindow.open(map); infoWindow.setPosition(event.latLng);You are currently placing the infowindow at the place that is clicked
infoWindow.setPosition(event.latLng);.
If you want the infowindow in the center of the bounds of the polygon, you need to place it there:
code snippet:
var map, infoWindow;
var infoWindow = new google.maps.InfoWindow({
content: "Hello World!"
});
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);
for (var i in coordinates) {
arr = [];
var polyBounds = new google.maps.LatLngBounds();
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]);
polyBounds.extend(arr[arr.length - 1]);
}
var IWpoint = polyBounds.getCenter();
// Construct the polygon.
polygons.push(new google.maps.Polygon({
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
IWpoint: IWpoint
}));
polygons[polygons.length - 1].setMap(map);
var centerMark = new google.maps.Marker({
map: map,
position: IWpoint,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
anchor: new google.maps.Point(3.5, 3.5),
size: new google.maps.Size(7, 7)
},
title: "polygon " + i
});
google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {
infoWindow.setPosition(this.IWpoint);
infoWindow.open(map);
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
// 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]
]
};
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>
If you want to place it at the polygons "centroid", you need to compute that and place it there:
// from http://stackoverflow.com/questions/9692448/how-can-you-find-the-centroid-of-a-concave-irregular-polygon-in-javascript
function get_polygon_centroid(pts) {
var first = pts[0], last = pts[pts.length-1];
if (first.lat() != last.lat() || first.lng() != last.lng()) pts.push(first);
var twicearea=0,
x=0, y=0,
nPts = pts.length,
p1, p2, f;
for ( var i=0, j=nPts-1 ; i<nPts ; j=i++ ) {
p1 = pts[i]; p2 = pts[j];
f = p1.lat()*p2.lng() - p2.lat()*p1.lng();
twicearea += f;
x += ( p1.lng() + p2.lng() ) * f;
y += ( p1.lat() + p2.lat() ) * f;
}
f = twicearea * 3;
return new google.maps.LatLng(y/f, x/f);
}
这篇关于Google地图infowindow位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
