多个多边形，InfoWindow，setMap [英] multiple polygons, InfoWindow, setMap
本文介绍了多个多边形，InfoWindow，setMap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好吧，我在这方面花了一段时间，而且我偶然发现了很多教程和示例，并且得到了很多。
我需要使用单独的InfoWindow创建多个多边形。想想我已经知道了，但setMap有问题。这是我有多远：
获取类型错误
object＃< object>没有方法'setMap'
我该如何解决这个错误？
< script>
var map;
var infoWindow;
函数initialize（）{
var myLatLng = new google.maps.LatLng（24.886436490787712，-70.2685546875）;
var mapOptions = {
zoom：5，
center：myLatLng，
mapTypeId：google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map（document.getElementById（map_canvas），
mapOptions）;
//让我们从一个空对象开始：
var countries = {
};
//现在我们添加一个县多边形：
countries ['UK'] = new google.maps.Polygon（{
paths：[
new google。 maps.LatLng（59.677361，-2.469846），
新google.maps.LatLng（59.299717，-6.314917），
新google.maps.LatLng（57.877247，-9.314917），
新google .maps.LatLng（54.428078，-11.638861），
新google.maps.LatLng（51.784554，-11.702241），
新google.maps.LatLng（50.185848，-10.054354），
新google.maps.LatLng（49.405380，-7.012100），
新增google.maps.LatLng（49.090675，-3.272664），
新增google.maps.LatLng（48.775970，-1.709283），
新的google.maps.LatLng（49.757851，-2.089565），
新google.maps.LatLng（50.714554,1.037195），
新google.maps.LatLng（51.482437,2.304801），
新google.maps.LatLng（53.433609，3.276632），
new google.maps.LatLng（55.863132,3.445646）
// ...
]，
strokeColor：＃FF0000 ，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：＃FF0000，
fillOpacity：0.3
}）;
//下一个县：
个国家['FR'] = new google.maps.Polygon（{
paths：[
//这不是真实的数据：
new google.maps.LatLng（25.774252，-80.190262），
google.maps.LatLng（18.466465，-66.118292），
google.maps.LatLng（32.321384，-64.757370 ），
new google.maps.LatLng（25.774252，-80.190262）
// ...
]，
strokeColor：＃FF0000，
strokeOpacity： 0.8，
strokeWeight：2，
fillColor：＃FF0000，
fillOpacity：0.3
}）;
//等等...
countries.setMap（map）
;
//为click事件添加一个侦听器
google.maps.event.addListener（UK，'click'，showInfoUK）;
google.maps.event.addListener（FR，'click'，showInfoFR）;
infowindow = new google.maps.InfoWindow（）;
}
function showInfoUK（event）{
var contentString =< b> UK< / b>< br />;
contentString + =英国，海峡群岛，爱尔兰;
//替换我们的信息窗口的内容和位置
infowindow.setContent（contentString）;
infowindow.setPosition（event.latLng）;
infowindow.open（map）;
}
function showInfoFR（event）{
var contentString =< b> FR< / b>< br />;
contentString + =France，N，W;
//替换我们的信息窗口的内容和位置
infowindow.setContent（contentString）;
infowindow.setPosition（event.latLng）;
infowindow.open（map）;
}
< / script>
解决方案
Javascript没有引用键例如PHP，所以国家['英国']是不可能设置。你必须使用数字键。所以语法应该是这样的：
countries [0] = new google.maps.Polygon（{...}） ;
countries [1] =新google.maps.Polygon（{...}）;
我让你的例子工作：
可以调整。这并不完美。这只是一个快速修复。
您可以从那里继续
well, I've spent a while on this, and I've stumbled my way through and got this far with the help of many tutorials and examples.
I need to create multiple polygons each with a separate InfoWindow. Think I've got that but having trouble with setMap. This is how far I've got:
Getting a type error
object #<object> has no method 'setMap'
How can I fix this error?
<script>
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// Let's start with an empty object:
var countries = {
};
// Now let's add a county polygon:
countries['UK'] = new google.maps.Polygon({
paths: [
new google.maps.LatLng(59.677361, -2.469846),
new google.maps.LatLng(59.299717, -6.314917),
new google.maps.LatLng(57.877247, -9.314917),
new google.maps.LatLng(54.428078, -11.638861),
new google.maps.LatLng(51.784554, -11.702241),
new google.maps.LatLng(50.185848, -10.054354),
new google.maps.LatLng(49.405380, -7.012100),
new google.maps.LatLng(49.090675, -3.272664),
new google.maps.LatLng(48.775970, -1.709283),
new google.maps.LatLng(49.757851, -2.089565),
new google.maps.LatLng(50.714554, 1.037195),
new google.maps.LatLng(51.482437, 2.304801),
new google.maps.LatLng(53.433609, 3.276632),
new google.maps.LatLng(55.863132, 3.445646)
// ...
],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.3
});
// Next county:
countries['FR'] = new google.maps.Polygon({
paths: [
// This is not real data:
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.757370),
new google.maps.LatLng(25.774252, -80.190262)
// ...
],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.3
});
// And so on...
countries.setMap(map)
;
// Add a listener for the click event
google.maps.event.addListener(UK, 'click', showInfoUK);
google.maps.event.addListener(FR, 'click', showInfoFR);
infowindow = new google.maps.InfoWindow();
}
function showInfoUK(event) {
var contentString = "<b>UK</b><br />";
contentString += "UK, Channel Islands, Ireland";
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
function showInfoFR(event) {
var contentString = "<b>FR</b><br />";
contentString += "France, N,W";
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
</script>
解决方案
Javascript doesn't have references to keys like for example php, so countries['UK'] is not possible to set. You have to use numeric keys. So syntax should be something like this:
countries[0] = new google.maps.Polygon({ ... });
countries[1] = new google.maps.Polygon({ ... });
I made your example working:
Can be finetuned. It's not perfect. It's just a quick fix. You can go on from there
这篇关于多个多边形，InfoWindow，setMap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
