之前的工作中需要在谷歌地图上绘制可编辑多边形区域，所以基于谷歌地图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. stable_sort()与sort

    stable_sort与sort()都是c++库函数,调用<algorithm>库,但区别是sort是不稳定的排序,而stable_sort是稳定的,有时候stable_sort比sort ...

  2. 201521123084 《Java程序设计》第2周学习总结

    第2周作业-Java基本语法与类库 1. 本周学习总结 1.学会使用码云管理代码: 2.学会使用Eclipse关联jdk源代码,并查看对象的源代码: 3.学会String类和StringBuilder ...

  3. 团队作业8——第二次项目冲刺（Beta阶段）--5.24 forth day

    团队作业8--第二次项目冲刺(Beta阶段)--5.24 forth day Day four: 会议照片 项目进展 Beta冲刺的第四天,以下是今天具体任务安排: 队员 昨天已完成的任务 今日计划完 ...

  4. 201521123083《Java程序设计》第12周学习总结

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

  5. [2017BUAA软工助教]收集个人信息

    如题 我们要收集三个东西 1.学号 2.Github地址 ① 3.博客园博客地址 ② 请各位同学自行创建,并按照如下的格式评论在这篇博客下 "14061195+https://github. ...

  6. 201521123026 《Java程序设计》第5周学习总结

    1. 本章学习总结 尝试使用思维导图总结有关多态与接口的知识点 使用常规方法总结其他上课内容 1.接口的出现时为了实现多态,多态的实现不一定依赖于接口. 2.接口的常见成员有:全局常量和抽象方法. 3 ...

  7. Python[小甲鱼005Python的数据类型]

    一.数值类型 整形 布尔类型        True 和 False  即1和0 浮点型 e记法                e ,例如      1.5e11 = 150000000000     ...

  8. 201521123035《Java程序设计》第十二周学习总结

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

  9. es6中对象的类与继承方法

    对于对象,我一直搞不清楚到底是该如何去继承,如何去书写.在熟练es6之后,终于会尝试写出来了. 代码如下: //我们假定父类为person,子类为man class person{ construct ...

  10. Linux系统常用的文件查看及处理命令

    常用的文本查看及处理命令 1.cat命令 (1).作用 连接文件并打印到标准输出设备上,cat经常用来显示文件的内容. (2).用法 1):用法:cat  (参数) 文件 2):常用参数 -n或-nu ...