有一个需求用谷歌地图绘制一个图形,获取图形范围内有哪些标记点。我试着看谷歌地图的js文档,发现里面有此类的功能。

文档链接:谷歌地图api

我来分享一下使用方法:

//核心方法
google.maps.geometry.poly.containsLocation('经纬度对象', '图形实例')
let graphicalPath = [];
let graphicalExample = null;//绘制图形的实例
let package_list = [];//标记点数据
function setDrawingModes() {//开始实例化绘制工具库let drawingModesList = {MARKER: google.maps.drawing.OverlayType.MARKER,CIRCLE: google.maps.drawing.OverlayType.CIRCLE,POLYGON: google.maps.drawing.OverlayType.POLYGON,POLYLINE: google.maps.drawing.OverlayType.POLYLINE,RECTANGLE: google.maps.drawing.OverlayType.RECTANGLE,};const drawingManager = new google.maps.drawing.DrawingManager({drawingControl: true,drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER,drawingModes: [drawingModesList.POLYGON],},polygonOptions: {fillColor: "blue",strokeColor: "blue",strokeOpacity: 0.8,fillOpacity: 0.4,strokeWeight: 5,clickable: false,editable: true,zIndex: 1,},polylineOptions: {fillColor: "blue",strokeColor: "blue",strokeOpacity: 0.8,fillOpacity: 0.4,strokeWeight: 5,clickable: false,editable: true,zIndex: 1,},});drawingManager.setMap(map);//监听绘制多边形完成事件事件google.maps.event.addListener(drawingManager, "polygoncomplete", (e) => {let path = e.getPath().getArray();//存在就清除上一个图形if (graphicalExample) {graphicalExample.setMap(null);}graphicalExample = e;setPath(path);//监听回显图形每一个路径点google.maps.event.addListener(e.getPath(), "insert_at", (event) => {setPath(path);});google.maps.event.addListener(e.getPath(), "set_at", (event) => {setPath(path);});//绘制完成后关闭绘制状态drawingManager.setDrawingMode(null);});
}function setPath(path) {let graphicalPath = []path.forEach((v) => {graphicalPath.push({ lat: v.lat(), lng: v.lng() })})package_list.forEach(v=>{//graphicalExample图形实例if(google.maps.geometry.poly.containsLocation({ lat: v.lat*1, lng: v.long*1 }, graphicalExample) == true){//等于true就在图形范围内console.log(v);}})
}

用谷歌地图api获取图形范围内有几个标记点相关推荐

  1. php获取谷歌地图gps定位,谷歌地图 API 开发之获取当前坐标(经纬度)

    很多时候要定位到当前所在的位置,谷歌地图 API 没找到,然后网上搜的是通过原生js geolocation来实现的. 代码如下: var x=document.getElementById(&quo ...

  2. 谷歌地图API位置请求_Google Maps API

    谷歌地图API位置请求  Google maps api 以xml格式传回请求的地址:http://maps.google.com/maps/api/geocode/xml?latlng=39.910 ...

  3. 谷歌地图api的使用 一

    一.注册账号 使用谷歌地图api,需要注册一个谷歌账号,并创建一个你的项目,在项目中开通你所需要的api. 谷歌地图api网址:https://cloud.google.com/maps-platfo ...

  4. 谷歌地图api 微信小程序_使用Google的融合位置提供程序API进行实时位置跟踪

    谷歌地图api 微信小程序 Location tracking and monitoring have seen a surge in modern application development w ...

  5. 使用 html5 显示导航路线 谷歌地图api

    最近在项目遇到一个关于谷歌地图的问题,看了下谷歌地图api后实现了导航和定位的功能,特意记录下,以便以后查看. 整个流程从服务端获得目的地(简称 B)的经纬度地址,通过客户端获得用户(简称A)的经纬度 ...

  6. python获取某地铁站经纬度_python通过百度地图API获取某地址的经纬度详解

    前言 这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的,本文将给大家详细的介绍关于python通过百度地图A ...

  7. 谷歌地图api v3学习之:起步

    最近公司项目需要用到地图搜索功能,首先考虑的是gmap(谷歌地图api),一开始觉得它很神秘很难,但经过几天的研究发现其实很简单.谷歌官网api写的很详细,一目了然 .在此用的是version3版本, ...

  8. 谷歌地图API教程及在VUE中的使用

    目录 一.获取密钥API Key   1.创建项目   2.启用Maps JavaScript API服务   3.创建API Key   4.设置结算账户 二.头文件中引入api资源文件   1.获 ...

  9. 百度地图利用位置提供服务器,利用百度地图API获取当前位置信息的实例

    利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: var map; var gpsPoint; var baiduPoint; ...

最新文章

  1. 摘:C/C++中时间类time.h
  2. 转帖:从C51的指针到病毒-c51软复位,经典,分析透彻
  3. 蓝桥杯:安慰奶牛(最小生成树)
  4. 新站优化最应该考虑哪些方面
  5. Spring Cloud的核心成员、以及架构实现详细介绍
  6. 文件上传java前端怎么写_做一个文件上传,前端是ajax提交数据后台是java,这个错误怎么办...
  7. 如何优雅地「蜗居」?
  8. (王道408考研数据结构)第八章排序-第三节2:堆与堆排序
  9. Maven: git-commit-id-plugin插件
  10. FTP 编写 2:客户端与服务端的连接
  11. nginx的反向代理、负载均衡、页面缓存、URL重写及读写分离
  12. [eclipse error]'Android Dependencies' which does not allow modifications to source attachments on it
  13. 漏洞四处,苹果电脑也不再安全?(转)
  14. SV中的浅拷贝和深拷贝
  15. 【MATLAB】取模函数mod与取余函数的区别
  16. 通信算法之六十:SC_FDE系统的物理层算法设计与工程实现
  17. xcode 翻新工程_18个著名网站的酷概念设计(翻新)
  18. 深入理解CAS算法原理
  19. Magento 屏蔽国内IP,允许国内特定地区的IP访问
  20. 基于jsp的火车票网上订票系统

热门文章

  1. 在js中使用ejs标签,js中引用ejs变量
  2. 完美更新安装TensorFlow-gpu
  3. 四辆小车,每辆车加满油可以走一公里,问怎么能让一辆小车走最远
  4. 把一个数据库的表导入到另一个数据库中的方法
  5. 服务器环境配置项目论文,服务器配置与管理论文范文:服务器配置论文
  6. 欧洲中世纪末期的战争
  7. 辛东方:papi酱凭什么能够走红 背后的炒作令人发抖
  8. ActivityManagerService架构剖析开篇
  9. SpringBoot整合Mybatis3 Dynamic Sql(IDEA)
  10. Continuous Passive Motion (CPM)持续性被动运动