之前的工作中需要在谷歌地图上绘制可编辑多边形区域，所以基于谷歌地图API封装了个html页面，通过调用js绘制多边形并返回各点的经纬度坐标；当然首先你要保证你的电脑可以打开谷歌地图。。。

新建一个html页面

<!DOCTYPE html>

<html>

<head>

    <title>googel Map</title>

    <meta name="viewport" content="initial-scale=1.0">

    <meta charset="utf-8">

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=替换成你申请的KEY值&&libraries=places&&libraries=drawing">  </script>

    <script type="text/javascript" src="../GMAPS/api/Airfunc.js"></script>

    <style>

        html, body {

            height: 100%;

            margin: 0;

            padding: 0;

        }

        #map {

            height: 100%;

        }

    </style>

</head>

<body onload="initMap('terrain')">

    <div id="map"></div>

</body>

</html>

新建js文件，我这里命名为Airfunc，这里主要的问题是对绘制图形的完成和编辑添加事件监听

var map;

var drawingManager;

var shape;

var Linetype;

var Linecolor;

var LineWeight;

var Aircolor;

var Airtmd;

var AirCircle;

var AirPolygon;

var AirShape = [];

var oldAirShape = [];

function initMap(mapType) {

    var myLatLng = { lat: 39.7656768, lng: 115.8299185 };

    map = new google.maps.Map(document.getElementById('map'), {

        zoom: 8,

        center: myLatLng,

        scaleControl: true,   //地图比例控件

        zoomControl: true,    //缩放控件

        disableDefaultUI: false,//默认UI

        mapTypeId: mapType

    });

}

//设置空域类型

function SetAirType(linetype,linecolor,lineWeight,aircolor,airtmd)

{

    Linetype = linetype;

    Linecolor = linecolor; //线色

    LineWeight = lineWeight;//线宽

    Aircolor = aircolor;//空域颜色

    Airtmd = airtmd;//空域透明度

}

//画圆形区域

function drawCircleMap()

{

    if (drawingManager != null) {

        drawingManager.setMap(null);

    }

    drawingManager = new google.maps.drawing.DrawingManager({

    drawingMode: google.maps.drawing.OverlayType.CIRCLE,

    drawingControl: true,

    drawingControlOptions: {

        position: google.maps.ControlPosition.TOP_CENTER,

        drawingModes: ['circle']

    },

    markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' },

    circleOptions: {

        strokeColor: Linecolor,

        fillColor: Aircolor,

        fillOpacity: Airtmd,

        strokeWeight: LineWeight,

        clickable: false,

        editable: true,

        zIndex: 1

    }

    });

    drawingManager.setMap(map);

    drawingManager.addListener('circlecomplete',shapecomplete);//添加完成事件监听

    drawingManager.addListener('overlaycomplete',overlaycomplete);//添加编辑事件监听

}

function shapecomplete(e) {

    drawingManager.setDrawingMode(null);

    if (shape != null) {

        shape.setMap(null);

    }

    //清除上一个围栏叠加层

    shape = e;

    shape.setMap(map);

   if (e.type == google.maps.drawing.OverlayType.CIRCLE) {

        var cenbl = e.getCenter();

        var iradius = e.getRadius();

        window.external.GetShapeLonLat(cenbl.lat()+","+cenbl.lng()+","+iradius);

    }

    else if (e.type == google.maps.drawing.OverlayType.POLYGON)

    {

        var array = e.getPath().getArray();

        ReturnLonLat(array);

    }

}

//画多边形区域

function drawPolygonMap()

{

    if (drawingManager != null)

    {

        drawingManager.setMap(null);

    }

     drawingManager = new google.maps.drawing.DrawingManager({

        drawingMode: google.maps.drawing.OverlayType.POLYGON,

        drawingControl: true,

        drawingControlOptions: {

            position: google.maps.ControlPosition.TOP_CENTER,

            drawingModes: ['polygon']

        },

        markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' },

        polygonOptions: {

            strokeColor: Linecolor,

            fillColor: Aircolor,

            fillOpacity: Airtmd,

            strokeWeight: LineWeight,

            clickable: false,

            editable: true,

            strokeStyle:'dashed',

            zIndex: 1

        }

   });

     drawingManager.setMap(map);

     drawingManager.addListener('polygoncomplete', shapecomplete);//添加完成事件事件监听

     drawingManager.addListener('overlaycomplete', overlaycomplete);//添加编辑事件监听

}

function overlaycomplete(e) {

    if (e.type == google.maps.drawing.OverlayType.CIRCLE) {

        // Switch back to non-drawing mode after drawing a shape.

        // Add an event listener that selects the newly-drawn shape when the user

        // mouses down on it.

        var newShape = e.overlay;

        newShape.type = e.type;

        google.maps.event.addListener(newShape, 'radius_changed', function () {

            var cenbl = newShape.getCenter();

            var iradius = newShape.getRadius();

            window.external.GetShapeLonLat(cenbl.lat() + "," + cenbl.lng() + "," + iradius);

        });

        google.maps.event.addListener(newShape, 'center_changed', function () {

            var cenbl = newShape.getCenter();

            var iradius = newShape.getRadius();

            window.external.GetShapeLonLat(cenbl.lat() + "," + cenbl.lng() + "," + iradius);

        });

        google.maps.event.addListener(newShape, 'click', function () {

            var cenbl = newShape.getCenter();

            var iradius = newShape.getRadius();

            window.external.GetShapeLonLat(cenbl.lat() + "," + cenbl.lng() + "," + iradius);

        });

    }

    else if(e.type == google.maps.drawing.OverlayType.POLYGON)

    {

        var array;

        var newShape = e.overlay;

        newShape.type = e.type;

        var array = newShape.getPath().getArray();

        google.maps.event.addListener(newShape, 'click', function () {

        });

        google.maps.event.addListener(newShape.getPath(), 'insert_at', function () {

            array = newShape.getPath().getArray();

            ReturnLonLat(array);

        });

        google.maps.event.addListener(newShape.getPath(), 'set_at', function () {

            array = newShape.getPath().getArray();

            ReturnLonLat(array);

        });

        google.maps.event.addListener(newShape.getPath(), 'remove_at', function () {

            ReturnLonLat.setMap(map);

        });

    }

}

function ReturnLonLat(arr) {

    var strinfo = "";

    for (var i = 0; i < arr.length; i++) {

        strinfo += arr[i].lat()

        strinfo += ",";

        strinfo += arr[i].lng();

        strinfo += "|";

    };

    window.external.GetShapeLonLat(strinfo);

}

一个简单的加载谷歌地图，并调用封装js实现绘制可编辑圆形和多变形的功能就完成了。

js基于谷歌地图API绘制可编辑圆形与多边形的更多相关文章

  1. 在谷歌地图上绘制行政区域轮廓【结合高德地图的API】

    实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...

  2. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  3. 基于百度地图api + AngularJS 的入门地图

    转载请注明地址:http://www.cnblogs.com/enzozo/p/4368081.html 简介: 此入门地图为简易的“广州大学城”公交寻路地图,采用很少量的AngularJS进行inp ...

  4. 谷歌地图 API 开发之获取坐标以及街道详情

    自己的项目中有获取当前点击的坐标经纬度或者获取当前街道的信息的需求.估计这个对于新手来说,还是比较麻烦的,因为从官网上找这个也并不是很好找,要找好久的,运气好的可能会一下子找到. 献上自己写的测试案例 ...

  5. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

  6. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  7. 怎样基于谷歌地图的Server缓存公布Image Service服务

    怎样基于谷歌地图的Server缓存公布Image Service服务 第一步:下载地图数据 下载安装水经注万能地图下载器,启动时仅仅选择电子.谷歌(这里能够依据自己的须要选择).例如以下图所看到的. ...

  8. 谷歌地图 API 开发之添加标记（解析以及补充）

    今天又看了下官网,发现官网上有地图标记的详细说明.当时居然眼瞎看不见,还琢磨了好久...#$%^&,一定是项目太急,没看到(^o^)/~地址:https://developers.google ...

  9. 【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点？如天安门附近所有的餐厅、加油站、宾馆、大厦等

    原文:[百度地图API]如何用圆形搜索获取中心点周围100米内全部关键点?如天安门附近所有的餐厅.加油站.宾馆.大厦等 摘要: 在LBS上有这样一个常用的功能,查找附近所有的关键点(POI点,比如标志 ...

随机推荐

  1. java中super关键字

    1.子类的构造函数如果要引用super的话,必须把super放在函数的首位,如果想用super继承父类构造的方法,但是没有放在第一行的话,那么在super之前的语句,肯定是为了满足自己想要完成某些行为 ...

  2. 浏览器console的用法

    Leo_wlCnBlogs 自由.创新.研究.探索 Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件 ...

  3. 【Beta】阶段 第一次Daily Scrum Meeting

    每日任务 1.本次会议为第一次 Meeting会议: 2.本次会议在周一下午16:40,课间休息时间在禹州楼召开,召开本次会议为10分钟. 一.今日站立式会议照片 二.每个人的工作 (有work it ...

  4. 201521123038 《Java程序设计》 第八周学习总结

    201521123038 <Java程序设计> 第八周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 从集合里面获取对象时必须进行强制类 ...

  5. 201521123121 《JAVA程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 所有泛型方法声明都有一个类型参数声明部分(由尖括号分隔),该类型参数声 ...

  6. 201521123028《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 Q1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看. 对上周PTA的实验5-3中的矩形和圆形类做注释. Q2.面向对象 ...

  7. 201521123030 《Java程序设计》 第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 1.将Student对象(属性:int id, String name,int age,dou ...

  8. 201521123089 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-11.1 截图你的提交结果(出现学号) 1.2 自己以前编 ...

  9. JavaScript的5中基本数据类型

    javascript的5种基本数据类型有: Undefined,Null,Bollean,Number,String,1种复杂数据类型:Object. 1Boolean类型 将一个值转换为Bollea ...

  10. Struts2开山篇【引入Struts、自定义MyStruts框架】

    前言 这是Strtus的开山篇,主要是引入struts框架-为什么要引入struts,引入struts的好处是什么-. 为什么要引入struts? 首先,在讲解struts之前,我们来看看我们以前写的 ...