用谷歌地图api获取图形范围内有几个标记点
有一个需求用谷歌地图绘制一个图形,获取图形范围内有哪些标记点。我试着看谷歌地图的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获取图形范围内有几个标记点相关推荐
- php获取谷歌地图gps定位,谷歌地图 API 开发之获取当前坐标(经纬度)
很多时候要定位到当前所在的位置,谷歌地图 API 没找到,然后网上搜的是通过原生js geolocation来实现的. 代码如下: var x=document.getElementById(&quo ...
- 谷歌地图API位置请求_Google Maps API
谷歌地图API位置请求 Google maps api 以xml格式传回请求的地址:http://maps.google.com/maps/api/geocode/xml?latlng=39.910 ...
- 谷歌地图api的使用 一
一.注册账号 使用谷歌地图api,需要注册一个谷歌账号,并创建一个你的项目,在项目中开通你所需要的api. 谷歌地图api网址:https://cloud.google.com/maps-platfo ...
- 谷歌地图api 微信小程序_使用Google的融合位置提供程序API进行实时位置跟踪
谷歌地图api 微信小程序 Location tracking and monitoring have seen a surge in modern application development w ...
- 使用 html5 显示导航路线 谷歌地图api
最近在项目遇到一个关于谷歌地图的问题,看了下谷歌地图api后实现了导航和定位的功能,特意记录下,以便以后查看. 整个流程从服务端获得目的地(简称 B)的经纬度地址,通过客户端获得用户(简称A)的经纬度 ...
- python获取某地铁站经纬度_python通过百度地图API获取某地址的经纬度详解
前言 这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的,本文将给大家详细的介绍关于python通过百度地图A ...
- 谷歌地图api v3学习之:起步
最近公司项目需要用到地图搜索功能,首先考虑的是gmap(谷歌地图api),一开始觉得它很神秘很难,但经过几天的研究发现其实很简单.谷歌官网api写的很详细,一目了然 .在此用的是version3版本, ...
- 谷歌地图API教程及在VUE中的使用
目录 一.获取密钥API Key 1.创建项目 2.启用Maps JavaScript API服务 3.创建API Key 4.设置结算账户 二.头文件中引入api资源文件 1.获 ...
- 百度地图利用位置提供服务器,利用百度地图API获取当前位置信息的实例
利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: var map; var gpsPoint; var baiduPoint; ...
最新文章
- 摘:C/C++中时间类time.h
- 转帖:从C51的指针到病毒-c51软复位,经典,分析透彻
- 蓝桥杯:安慰奶牛(最小生成树)
- 新站优化最应该考虑哪些方面
- Spring Cloud的核心成员、以及架构实现详细介绍
- 文件上传java前端怎么写_做一个文件上传,前端是ajax提交数据后台是java,这个错误怎么办...
- 如何优雅地「蜗居」?
- (王道408考研数据结构)第八章排序-第三节2:堆与堆排序
- Maven: git-commit-id-plugin插件
- FTP 编写 2:客户端与服务端的连接
- nginx的反向代理、负载均衡、页面缓存、URL重写及读写分离
- [eclipse error]'Android Dependencies' which does not allow modifications to source attachments on it
- 漏洞四处,苹果电脑也不再安全?(转)
- SV中的浅拷贝和深拷贝
- 【MATLAB】取模函数mod与取余函数的区别
- 通信算法之六十:SC_FDE系统的物理层算法设计与工程实现
- xcode 翻新工程_18个著名网站的酷概念设计(翻新)
- 深入理解CAS算法原理
- Magento 屏蔽国内IP,允许国内特定地区的IP访问
- 基于jsp的火车票网上订票系统
热门文章
- 在js中使用ejs标签,js中引用ejs变量
- 完美更新安装TensorFlow-gpu
- 四辆小车,每辆车加满油可以走一公里,问怎么能让一辆小车走最远
- 把一个数据库的表导入到另一个数据库中的方法
- 服务器环境配置项目论文,服务器配置与管理论文范文:服务器配置论文
- 欧洲中世纪末期的战争
- 辛东方:papi酱凭什么能够走红 背后的炒作令人发抖
- ActivityManagerService架构剖析开篇
- SpringBoot整合Mybatis3 Dynamic Sql(IDEA)
- Continuous Passive Motion (CPM)持续性被动运动