之前的工作中需要在谷歌地图上绘制可编辑多边形区域，所以基于谷歌地图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. Python终端输出打印彩色字体的方法

    一  实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用八进制表示就是0 ...

  2. 百度AI开放平台- API实战调用

    百度AI开放平台- API实战调用 一.      前言 首先说一下项目需求. 两个用户,分别上传了两段不同的文字,要计算两段文字相似度有多少,匹配数据库中的符合条件的数据,初步估计列出来会有60-1 ...

  3. 基于AXI4总线卷积FPGA加速IP核的尝试

    本文先总结不同AXI IP核的实现的方法,性能的对比,性能差异的分析,可能改进的方面.使用的硬件平台是Zedboard. 不同的AXI总线卷积加速模块的概况 这次实现并逐渐优化了三个版本的卷积加速模块 ...

  4. setTimeout,setInterval你不知道的…

    javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...

  5. (2)ES6解构赋值-数组篇

    1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...

  6. 使用BootStrap框架设置全局CSS样式

    一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...

  7. [2017BUAA软工]第0次个人作业

    第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢? 我觉得我选择计算机系完全是误打误撞吧.当时我的分数上北航是没问题的,所以填专业时就是机械,电气,自动化,计算机等 ...

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

    本周学习总结 刚加入java的学习,我感觉很困难.但我觉得学习并不是一蹴而就.只要我多读,多看,多练,一定会取得进步.有空的时候把书本上的代码敲一敲.相信会有回报. 2.书面作业 1.为什么java程 ...

  9. 2017Java课程设计201521123007

    1. 课程设计博客链接 项目地址 2. 个人负责模块或任务说明 ps:一个人做的项目 一个登录jsp文件,登录成功转入商品界面, 一个商品jsp文件,显示所有商品信息,数据从MySql数据库导入,可以 ...

  10. Java课程设计—学生成绩管理系统（54号童欢）

    1. 团队课程设计博客链接 http://www.cnblogs.com/wufuckshuo/p/7063183.html 2.个人责模块或任务说明 负责模块/任务:主函数(调用其他的功能函数),添 ...