Javascript 多个多边形、信息窗口、setMap

嗯，我花了一段时间在这个问题上，在许多教程和示例的帮助下，我跌跌撞撞地走到了这一步

我需要创建多个多边形，每个多边形都有一个单独的信息窗口。我想我已经知道了，但是在设置地图上遇到了麻烦。这就是我所取得的成绩：

获取类型错误

object #<object> has no method 'setMap'

对象#没有方法“setMap”

如何修复此错误

<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>

var映射；
var信息窗口；
函数初始化（）{
var mylatng=new google.maps.LatLng（24.886436490787712，-70.2685546875）；
变量映射选项={
缩放：5，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
//让我们从一个空对象开始：
var国家={
};
//现在，让我们添加一个县多边形：
国家['UK']=新的google.maps.Polygon({
路径：[
新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），
新google.maps.LatLng（55.863132,3.445646）
// ...
],
strokeColor:#FF0000“，
笔划不透明度：0.8，
冲程重量：2，
fillColor:#FF0000“，
填充不透明度：0.3
});
//下一个县：
国家['FR']=新的google.maps.Polygon({
路径：[
//这不是真实的数据：
新的google.maps.LatLng（25.774252，-80.190262），
新google.maps.LatLng（18.466465，-66.118292），
新google.maps.LatLng（32.321384，-64.757370），
新google.maps.LatLng（25.774252，-80.190262）
// ...
],
strokeColor:#FF0000“，
笔划不透明度：0.8，
冲程重量：2，
fillColor:#FF0000“，
填充不透明度：0.3
});
//等等。。。
国家。setMap（地图）
;
//为单击事件添加侦听器
google.maps.event.addListener（英国，'click'，showInfoUK）；
google.maps.event.addListener（FR'click'，showInfoFR）；
infowindow=new google.maps.infowindow（）；
}
功能showInfoUK（活动）{
var contentString=“UK
”；
contentString+=“英国、海峡群岛、爱尔兰”；
//替换信息窗口的内容和位置
setContent（contentString）；
infowindow.setPosition（event.latLng）；
打开（地图）；
}
函数showInfoFR（事件）{
var contentString=“FR
”；
contentString+=“法国，北，西”；
//替换信息窗口的内容和位置
setContent（contentString）；
infowindow.setPosition（event.latLng）；
打开（地图）；
}

Javascript数组没有

.setMap（）

方法。google.maps.Polygon（）对象可以。此外，javascript中没有关联数组，例如国家['UK']

这可能会奏效：

countries['UK'].setMap(map);

---

但是这是不正确的。

Javascript没有对诸如php之类的键的引用，因此无法设置国家['UK']。你必须使用数字键。所以语法应该是这样的：

countries[0] = new google.maps.Polygon({ ... });
countries[1] = new google.maps.Polygon({ ... });

我让你的例子奏效了：

可以微调。这并不完美。这只是一个快速解决办法。

---

您可以从这里继续

更简单、更简单地使用ajax。 比如说,

downloadUrl("url", function(data) {
    for (var i = 0; i < polygons.length; i++) {
        ........
        var decodedPath = ........
        polygon.setMap(map);
        ........
    }
});

downloadUrl（“url”），函数（数据）{
对于（var i=0；i

您的代码中有两个问题：

正如马塞洛所说，要将多边形添加到地图中，请使用：

countries[“UK”].setMap（地图）

要添加单击侦听器，您需要引用多边形：

google.maps.event.addListener（国家[“英国”]，“单击”，showInfoUK）

---

你的问题是什么？该死！我发现setMapjavascript数组没有.setMap（）方法时出错。google.maps.Polygon（）对象可以。另外，javascript中没有关联数组，比如countries['UK']。我明白了，所以我完全搞错了！？谢谢，我之前确实尝试过，但它得到了引用错误uk未定义。只有在省略引号（如countries[uk]）而不是countries['uk']时，您才能得到该错误消息，但无论如何，Javascript中没有关联数组请勿发布直接链接。。。。在你的答案中写一些代码…或expalin..谢谢你的例子，但没有多大用处，因为我看不到你的代码，所以无法看到你是如何做到的。啊，我明白了，谢谢你。然而，当我上传它时，main.js出现了一个错误：object没有方法'Load'，你是否正确地包含了google maps api js？main.js是Google使用的主要文件。你的初始化代码是什么？嗨，费里，我用你的小提琴代码创建了300多个多边形（英国郡边界）。但是我不确定如何给弹出窗口提供他们需要的信息，我目前无法让它弹出。这里的代码为每个新的信息窗口和匹配函数硬编码。我是否需要在foreach循环中包含函数并动态创建它？