谷歌地图：使用多边形自动形成类PolygonCreator

之前学习谷歌地图API，发现不管用Polygon类还是Polyline类都不能简单地自动形成一个闭合多边形，后来发现了PolygonCreator类，并参考了http://www.startutorial.com/articles/view/google-map-api-v3-polygon-shape-creator

 

1. About 

Polygon Creator is a javascript class which can be used to draw a ploygon shape on Google Map, and it currently has two public functions to return the polygon paths and its color. It is useful if you are looking for a ready to use Javascript tool to create polygon for your Google Map application. Polygon Creator is built with Jquery and written in a OOP coding style. It is written in Goolge Map API v3. 
And of course, it is completely free, so please make use of it.

2. How to use

1.Include scripts

  Include Google Map API:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

   Include JQuery:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

   Include Polygon Creator class:

<script type="text/javascript" src="polygon.min.js"></script>

2.Create a map object

If you have already constructed a map object, then you can skip this step. And just keep in mind, you will use the same map object to create Polygon Creator. First make sure you have a Div with id=”main-map” in your page body,then construct a map object as below:

var singapoerCenter=new google.maps.LatLng(1.37584, 103.829);
var myOptions = {
zoom: 10,
center: singapoerCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('main-map'), myOptions);

3.Construct Polygon Creator object

The parameter of PolygonCreator is the map which we have created above.

var creator = new PolygonCreator(map);

4.Test and Run

Now you should be able to draw polygon shape on your google map. And there are two class functions you can call to retrieve polygon information:

creator.showData()  

creator.showColor() 

5.Other functions

Destroy the polygon on the map

creator.destroy(); 

测试的Demo：http://www.the-di-lab.com/polygon/