如何在Google Maps v3上添加和删除多边形？ [英] How do I Add and Remove Polygons on Google Maps v3?

问题描述

我尝试使用API​​的v3显示并移除Google地图上的多边形。在我的JavaScript中，我已经获得了一些自定义Lat-Long的MVCArray。

我试图找出如何添加这些多边形，然后根据一些其他JavaScript事件或用户操作，例如点击多边形（已经渲染），多边形将被移除。

有人可以帮忙吗？任何代码或例子的链接？我正在努力寻找一些例子。他们中的大多数通常会使用一些v2代码。

解决方案

在API文档中，有一些简单的向地图添加多边形。以下是简单的百慕大三角形添加一个事件侦听器来添加一个事件侦听器来删除多边形的例子。

b var myLatLng = new google.maps.LatLng（24.886436490787712，-70.2685546875）;
var myOptions = {
zoom：5，
center：myLatLng，
mapTypeId：google.maps.MapTypeId.TERRAIN
};

var bermudaTriangle;

var map = new google.maps.Map（document.getElementById（map_canvas），
myOptions）;

变种triangleCoords = [
新google.maps.LatLng（25.774252，-80.190262），
新google.maps.LatLng（18.466465，-66.118292），
new google.maps.LatLng（32.321384，-64.75737），
new google.maps.LatLng（25.774252，-80.190262）
];

//构造多边形
bermudaTriangle = new google.maps.Polygon（{
paths：triangleCoords，
strokeColor：＃FF0000，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：＃FF0000，
fillOpacity：0.35
}）;

bermudaTriangle.setMap（map）;

//添加事件侦听器
google.maps.event.addListener（bermudaTriangle，'click'，function（）{
this.setMap（null）;
}）;

}

I'm trying to show and remove polygons onto a Google Map, using v3 of the API. In my JavaScript, I've already got an MVCArray of some custom Lat-Longs.

I'm trying to figure out how to add these polygons and then, based upon some other JavaScript event or user action, such as a click on a polygon (that has been rendered), that polygon will be removed.

Can someone help? Any code or links to examples? I'm struggling to find some examples. Most of them usually go to some v2 code.

解决方案

In the API docs, there are a couple of simple examples of adding a polygon to a map. Here's the initialize() function from the simple Bermuda Triangle example with the addition of adding an event listener to remove the polygon when clicked.

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

  var bermudaTriangle;

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  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),
      new google.maps.LatLng(25.774252, -80.190262)
  ];

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

  bermudaTriangle.setMap(map);

  // add an event listener
  google.maps.event.addListener(bermudaTriangle, 'click', function() {
      this.setMap(null);
  });

}

这篇关于如何在Google Maps v3上添加和删除多边形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！