Fatal编程技术网
  • javascript/
  • Javascript 使用Google Maps API的多个多边形阵列

Javascript 使用Google Maps API的多个多边形阵列

javascript html google-maps google-maps-api-3 gis

Javascript 使用Google Maps API的多个多边形阵列,javascript,html,google-maps,google-maps-api-3,gis,Javascript,Html,Google Maps,Google Maps Api 3,Gis,下面是使用GoogleMapsAPI创建多边形数组的步骤。我想创建多个多边形，每个多边形在单击时都有不同的名称。在下面的代码中，我希望单击第一个三角形时将其称为“名称1”，单击第二个三角形时将其称为“名称2”。我试图这样做，但当你点击它们时，它们都被称为“名称2”。我做错了什么？谢谢 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0,

下面是使用GoogleMapsAPI创建多边形数组的步骤。我想创建多个多边形，每个多边形在单击时都有不同的名称。在下面的代码中，我希望单击第一个三角形时将其称为“名称1”，单击第二个三角形时将其称为“名称2”。我试图这样做，但当你点击它们时，它们都被称为“名称2”。我做错了什么？谢谢

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon Arrays</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;
var name;

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      new google.maps.LatLng(25.774252, -80.190262),
      new google.maps.LatLng(18.466465, -66.118292),
      new google.maps.LatLng(32.321384, -64.75737)
  ];

  // Construct the polygon.
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  name = 'name 1';

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

  infoWindow = new google.maps.InfoWindow();

  var triangleCoords = [
      new google.maps.LatLng(40.774252, -95.190262),
      new google.maps.LatLng(33.466465, -81.118292),
      new google.maps.LatLng(47.321384, -79.75737)
  ];

  // Construct the polygon.
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  name = 'name 2';

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

  infoWindow = new google.maps.InfoWindow();
}

/** @this {google.maps.Polygon} */
function showArrays(event) {

  // Since this polygon has only one path, we can call getPath()
  // to return the MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>' + name + '</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // 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);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>


多边形阵列
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
//本例创建了一个表示百慕大三角形的简单多边形。
//当用户单击多边形时，将打开一个信息窗口，显示
//有关多边形坐标的信息。
var映射；
var信息窗口；
变量名；
函数初始化（）{
变量映射选项={
缩放：5，
中心：新google.maps.LatLng（24.886436490787712，-70.2685546875），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
百慕大角变异；
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
//定义多边形的板条坐标。
var triangleCoords=[
新的google.maps.LatLng（25.774252，-80.190262），
新google.maps.LatLng（18.466465，-66.118292），
新google.maps.LatLng（32.321384，-64.75737）
];
//构造多边形。
bermudaTriangle=新建google.maps.Polygon({
路径：三角形门，
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：3，
填充颜色：'#FF0000'，
不透明度：0.35
});
名称='name 1'；
百慕大陆角。设定图（map）；
//为单击事件添加侦听器。
google.maps.event.addListener（百慕大群岛，'click'，ShowArray）；
infoWindow=new google.maps.infoWindow（）；
var triangleCoords=[
新的google.maps.LatLng（40.774252，-95.190262），
新google.maps.LatLng（33.466465，-81.118292），
新google.maps.LatLng（47.321384，-79.75737）
];
//构造多边形。
bermudaTriangle=新建google.maps.Polygon({
路径：三角形门，
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：3，
填充颜色：'#FF0000'，
不透明度：0.35
});
名称='name 2'；
百慕大陆角。设定图（map）；
//为单击事件添加侦听器。
google.maps.event.addListener（百慕大群岛，'click'，ShowArray）；
infoWindow=new google.maps.infoWindow（）；
}
/**@this{google.maps.Polygon}*/
函数ShowArray（事件）{
//因为这个多边形只有一条路径，所以我们可以调用getPath（）
//返回LatLngs的MVCArray。
var顶点=this.getPath（）；
var contentString=''+name+'
'+
'单击的位置：
'+event.latLng.lat（）+'，'+event.latLng.lng（）+
“
”；
//在顶点上迭代。
对于（var i=0；i'+xy.lat（）+'，'+
xy.lng（）；
}
//替换信息窗口的内容和位置。
setContent（contentString）；
infoWindow.setPosition（event.latLng）；
打开（地图）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
问题

你基本上有问题，我要强调我看到的两个问题

首先，在应用程序顶部声明
name
变量，并设置其值两次。第二次，当设置为“名称2”时，它将覆盖“名称1”的初始值。这正是你正在做的

var name;
name = "name 1";
name = "name 2"; // this second assignment overwrote the assignment above it
我希望这样看是有意义的

其次，您还以完全相同的方式覆盖了
bermudaTriangle
变量，只是应用程序的性质不会导致您看到此错误导致的任何错误

和a解决方案

如果我修复了代码中的Javascript部分并进行了一些额外的改进，它看起来就像下面所说的（看看它的实际效果）。一些注意事项：

1） 因为我认为它更干净，所以我在初始化两个多边形的JS语句中移动了
路径
和
映射
属性

2） 我将
name
从一个应用程序级变量更改为直接属于多边形对象本身的可选属性，然后在多边形声明中设置该值

为了清楚起见，我想保留与您最初使用的相同的属性名称。尽管如此，为了避免与未记录的属性发生意外冲突，最好为任何动态/自定义属性指定一个唯一的前缀，并在应用程序中使用相同的前缀。考虑到这一点，
name
应该更像
xu name
，等等

3） 我给了第二个多边形唯一的变量名，
otherTriangle

var map;
var infoWindow;

function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(33.466465, -81.118292),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    // These are declared outside of the init function, so I
    // initialized them together at the top of the function..
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    infoWindow = new google.maps.InfoWindow();


    // Here's where your data begines. I moved the 1) API-supported paths object, 
    // 2) the API-supported map object, *AND* 3) the dynamic name value inside 
    // the Polygon object declarations.. this makes "name" a property of the object.
    var bermudaTriangle = new google.maps.Polygon({
        paths: [
        new google.maps.LatLng(25.774252, -80.190262),
        new google.maps.LatLng(18.466465, -66.118292),
        new google.maps.LatLng(32.321384, -64.75737)],
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        name: 'name 1', // dynamic, not an official API property..
        map: map
    });

    // Here's the behavior handler..
    google.maps.event.addListener(bermudaTriangle, 'click', showArrays);


    // This is a new, different object therefore we should instantiate it relative
    // to a new variable (i.e. a unique pointer). Once again I moved the paths, map,
    // and name properties inside the object declaration.
    var otherTriangle = new google.maps.Polygon({
        paths: [
        new google.maps.LatLng(40.774252, -95.190262),
        new google.maps.LatLng(33.466465, -81.118292),
        new google.maps.LatLng(47.321384, -79.75737)],
        strokeColor: '#008700',
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: '#008700',
        fillOpacity: 0.35,
        name: 'name 2', // dynamic, not an official API property..
        map: map
    });

    // Aaaaand, the behavior..
    google.maps.event.addListener(otherTriangle, 'click', showArrays);

}

// The only differnece here is that I changed "name" to this.name,
// becuase "this" (the object that fired the event), now carries around 
// that "name" property we gave it..
function showArrays(event) {
    var vertices = this.getPath();

    var contentString = '<b>' + this.name + '</b><br>' +
        'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
        '<br>';

    for (var i = 0; i < vertices.getLength(); i++) {
        var xy = vertices.getAt(i);
        contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng();
    }

    infoWindow.setContent(contentString);
    infoWindow.setPosition(event.latLng);

    infoWindow.open(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

var映射；
var信息窗口；
函数初始化（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（33.466465，-81.118292），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
//这些是在init函数之外声明的，因此
//在函数顶部将它们一起初始化。。
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
infoWindow=new google.maps.infoWindow（）；
//这是您的数据来源。我移动了API支持的路径对象，
//2）API支持的映射对象，*和*3）内部的动态名称值
//多边形对象声明..这使“名称”成为对象的属性。
var bermudaTriangle=新建google.maps.Polygon({
路径：[
新的google.maps.LatLng（25.774252，-80.190262），
新google.maps.LatLng（18.466465，-66.118292），
新google.maps.LatLng（32.321384，-64.75737）]，
strokeColor:'#FF0000