Tag Archives: Google 地图 API

Google 地图 API 多边形简单示例

Posted on by
Reply

刚刚完成了google地图的多边形。总结一下。
其实蛮简单。用GPolygon。定义好N个顶点。设置一下边和填充的属性就好。

GPolygon(latlngs:GLatLng[], strokeColor?:String, strokeWeight?:Number, strokeOpacity?:Number, fillColor?:Number, fillOpacity?:Number, opts?:GPolygonOptions)

根据顶点数组创建多边形。colors 是一个字符串，包含十六进制数字、HTML 样式的颜色，如 #RRGGBB。weight 是以像素为单位的线宽度。opacities 为 0 到 1 之间的数字。该线条平滑且半透明。

注意：第一个顶点要和最后一个顶点一样。这样才能闭合。
[sourcecode language="javascript"]
function initialize() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));//G_DEFAULT_MAP_TYPES
        var center = new GLatLng(25.5786946,110.3037643);
        map.setCenter(center,13);
        map.enableScrollWheelZoom();
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        var polygon = new GPolygon([
            new GLatLng(25.5786946,110.3037643),
            new GLatLng(25.3786946,110.4037643),
            new GLatLng(25.2786946,110.5037643),
            new GLatLng(25.4786946,110.2037643),
            new GLatLng(25.5786946,110.3037643),
            ], "#f33f00", 5, 1, "#ff0000", 0.2);
        map.addOverlay(polygon);
    }
}
[/sourcecode]

有关资料请参考google官方文档，这里已经写的比较详细：
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html

Google 地图 API循环输出多个GMarker信息窗口解决

Posted on by
Reply

http://www.liufangfang.net/blog/457是个简单的多边形DEMO，在实际应用我们会遇到N个不定的顶点。然后我想为这几个顶点加可以移动的infoWindow。麻烦就来了。 因为脚本部分我是用JQuery控制。然后是用JQuery的.each来控制循环。.each里本来就有个function。然后里面指引自身用$(this)。但是到了

GEvent.addListener又有个function。然后外面的变量都引用不了。如果是i。那么所有的i值都一样。也就是说。外层循环的所有值都进不了GEvent.addListener里。只有循环结束了，把相同的值放进每个GEvent.addListener里。这不是我想要的。找了一下资料。发现在GEvent.addListener里可以用this这个指引自身。然后在初始化每个顶点GMarker的时候设置title的属性。然后GEvent.addListener里用this.getTitle()取出来。至此问题解决。不过就是GMarker只有title这一个属性比较好藏数据。如果是多个数据。那要用的时候还要分割，比较麻烦。

如下：

[sourcecode language="javascript"]
var polygon = new GPolygon([], "#f33f00", 3, 1, "#ff0000", 0.1);
map.addOverlay(polygon);
i = 0;
$(".point").each(function(){
temp = $(this).attr("demaid");
polygon.insertVertex(i,new GLatLng($(this).attr("lat"),$(this).attr("lng")));
marker_array[i] = new GMarker(new GLatLng($(this).attr("lat"),$(this).attr("lng")),{draggable: true,title:temp});//标志点

GEvent.addListener(marker_array[i], "dragstart", function() {
map.closeInfoWindow();
});
map.addOverlay(marker_array[i]);
GEvent.addListener(marker_array[i], "dragend", function() {
url = "顶点ID:"+this.getTitle()+"(从小到大排序哦)。<a href=’?act=save_point&demaid="+this.getTitle()+"&lat="+this.getLatLng().lat()+"&lng="+this.getLatLng().lng()+"’>更新</a>";
this.openInfoWindowHtml(url);
});

i++;
});
[/sourcecode]

有关资料请参考google官方文档，这里已经写的比较详细：
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html