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

    ---------------------Form表单验证(用户请求验证+生成HTML标签) 示例:用户管理 a. 添加用户页面 - 显示HTML标签 - 提交:数据验证 - 成功之后保存 - 错误显 ...

  2. 使用nfs作为根文件系统启动，(3)

    通过设置u-boot的bootargs来更改开机自动进入nfs远端服务器,不需要mount指令,实现虚拟机编译程序后直接通过u-boot烧写程序 1  使用nfs作为根文件系统启动 1.1    pr ...

  3. [C#] 分布式ID自增算法 Snowflake

    最近在尝试EF的多数据库移植,但是原始项目中主键用的Sqlserver的GUID.MySQL没法移植了. 其实发现GUID也没法保证数据的递增性,又不太想使用int递增主键,就开始探索别的ID形式. ...

  4. 【★】IT界8大恐怖预言

    IT界的8大恐怖预言 本文字数:3276 建议阅读时间:你开心就好 第三次科技革命已经进入白热化阶段---信息技术革命作为其中最主要的一环已经奠定了其基本格局和趋势.OK大势已定,根据目前的形势,小编 ...

  5. SNS团队第一次站立会议（2017.04.22）

    一.当天站立式会议照片 本次会议主要内容:进一步明确了团队中各个成员的定位,说明了下一步团队工作的方向 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 罗于婕 系统架构设计及项目数据库设 ...

  6. 201521123057 《Java程序设计》 第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容 2. 书面作业 1.List中指定元素的删除(题目4-1) 1.1 实验总结 答:remove中注意应该使用eq ...

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

    1. 本周学习总结 ① java数组的使用.② String类,对象是不可变的,当新的字符串的内容与字符串池中的内容相同时,不是重新开辟新的内存存储,而是共享. 2. 书面作业 (1)使用Eclips ...

  8. 201521123067 《Java程序设计》第11周学习总结

    201521123067 <Java程序设计>第11周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线 ...

  9. MyeclipseJRE版本设置

    1.首先添加JDK版本 Window——Preferences——Java——Install JREs——Add——Stand VM——浏览JDK安装版本完成即可(一定是JDK中JRE的安装目录如:D ...

  10. Azure SQL Database (25) Azure SQL Database创建只读用户

    <Windows Azure Platform 系列文章目录> 本文将介绍如何在Azure SQL Database创建只读用户. 请先按照笔者之前的文章:Azure SQL Databa ...