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

    grep与find区别: grep:查找指定目录下过滤文本文件中行数据 find:查找指定目录下文件 grep使用 格式:   grep "text"   *  [选项] 选项: ...

  2. PyCharm：2017.3版即将新增科学计算模式，预览版现在可以下载使用

    编译:Lemon,原文作者:Ernst Haagsman 公众号:Python数据之道(ID:PyDataRoad) pycharm:2017.3版即将新增科学计算模式 在JetBrains将发布的新 ...

  3. NHibernte教程(10)--关联查询

    本节内容 关联查询引入 一对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 关联查询引入 在NHibernate中提供了三种查询方式给我们选择:NH ...

  4. 【深入Java虚拟机】之八：Java垃圾收集机制

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/18076173 对象引用 Java中的垃圾回收一般是在Java堆中进行,因为堆中几乎存放了J ...

  5. 四则运算GUI

    一.题目描述 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linux,web,手机上的),成 ...

  6. java--整理下关于static关键字的知识

    如果将域定义为static,每个类中只有一个这样的域.而每一个对象对于所有的实例域却都有自己的一份拷贝.--<java核心技术> 使用static的两种情形:1.只想为某特定域分配单一存储 ...

  7. 扫雷游戏制作过程（C#描述）：第五节、菜单操作（续）

    前言 这里给出教程原文地址. 该项目已经放在github上托管. 发布版已经分享到百度网盘 菜单操作(续) 接着节前一章节的内容,我们继续完善菜单栏的功能. 我们首先,先完善Rank的选项,我们希望我 ...

  8. 201521123108 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 答: 回复 ...

  9. Linux文件管理_1

    在Linux中,全部都是文件,所以文件管理在Linux上格外重要,在我们学习文件管理前,我们先学习几个关于文件的命令,之后才能更好的学习文件管理. 目录 pwd命令 cd命令 列出文件内容ls 查看文 ...

  10. Lucene第一篇【介绍Lucene、快速入门】

    什么是Lucene?? Lucene是apache软件基金会发布的一个开放源代码的全文检索引擎工具包,由资深全文检索专家Doug Cutting所撰写,它是一个全文检索引擎的架构,提供了完整的创建索引 ...