找了很多资料,自己写的在高德地图添加围栏,选点的功能。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>输入提示后查询,点击获取坐标</title> <style type="text/css"> body{ margin:0; height:100%; width:100%; position:absolute; font-size:12px; } #mapContainer{ position: absolute; top:0; left: 0; right:0; bottom:0; } </style> </head> <body> <div id="mapContainer" ></div> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=3819e3b9a7810x1930026f02fa8ebac2b"></script> <script type="text/javascript"> var windowsArr = []; var marker = []; var mapObj = new AMap.Map("mapContainer", { resizeEnable: true, zoom:11 }); mapObj.plugin(["AMap.ToolBar"], function() { mapObj.addControl(new AMap.ToolBar()); }); var jsonx = []; var clickEventListener=AMap.event.addListener(mapObj,'click',function(e){ var marker = new AMap.Marker({map:mapObj,position:[e.lnglat.lng,e.lnglat.lat]}); jsonx.push({"latitude":e.lnglat.lat,"longitude":e.lnglat.lng}); window.top.json = jsonx; AMap.event.addListener(marker, 'click', function(){ var mark = this; var x = 0; for(var i=0, a;a=jsonx[i];i++){ if (mark.getPosition().lng == a.longitude && mark.getPosition().lat == a.latitude) { x = i; } } Array.prototype.baoremove = function(dx) { if(isNaN(dx)||dx>this.length){return false;} this.splice(dx,1); } jsonx.baoremove(x) mapObj.remove(this); window.top.json = jsonx; }); }); </script> </body> </html>
最后得到的json 就是围栏的数组
相关推荐
总之,`GaodeMapDemo`项目是一个典型的Android地图应用示例,它涵盖了高德地图API的基本使用,以及如何在Android应用中实现地图选点和位置发送功能。对于想要学习Android地图开发的开发者来说,这是一个非常有价值的...
在Vue.js应用中,ElementUI是一个非常流行的前端组件库,提供了丰富的UI元素和交互设计,而高德地图则是一款强大的地图服务提供商,提供地图展示、定位、路线规划等功能。将ElementUI与高德地图结合,可以创建出具有...
高德地图实现多边形框选,选中展示地图中坐标点。实现坐标点框选。范围内坐标点选择。包括矩形,圆形,和任意多边形。。。需要修改key为自己注册的开发key
高德地图API是一个强大的工具,允许开发者实现丰富的地图功能,如地点搜索、路线规划以及路线保存等。以下是对这些功能的详细解释: 1. **地点搜索**: 高德地图API提供了地点搜索服务,允许用户通过关键字查询...
在使用高德地图进行开发时,我们经常需要在地图上展示一些特定的点,并且有时候这些点之间需要通过连线来表示某种关系或者路径。标题"高德地图将marker用连线连起来"所指的就是如何在高德地图API中实现这样的功能,...
这个项目不仅展示了如何在Vue3环境中引入和使用高德地图,还涵盖了地图的基本操作,如显示地图、添加和删除标记点。下面我们将详细探讨其中涉及的关键知识点。 1. **Vue3框架**: Vue3是Vue.js的最新版本,提供了...
js-vue-高德-实时定位.zip vue集成高德地图,实时定位用户当前位置经纬度,并在高德地图上显示具体位置 方法简便,丢入即可使用 vue集成高德地图,实时获取用户的位置经纬度,并在地图显示具体位置
高德地图 火星坐标(GCJ-02) 微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时,需要注意坐标的转换。此类坐标的转换函数在网上都有,这里不做过多解释 准备工作: 1、在做小程序 —- 路线规划之前,...
高德地图 ->选点,地址搜索,坐标逆解析
本组件是用于在地图上选点、回显坐标等
Vue 基于 Vue 2.0 和高德地图的地图组件实例 知识点一:vue-amap 的介绍 vue-amap 是一个基于 Vue 2.0 和高德地图的地图组件实例,旨在让开发者在编写地图应用时,能够从查找众多地图 API 和繁琐的地图状态同步中...
在本文中,我们将深入探讨如何将高德地图集成到HTML5(H5)页面中,以及如何通过选择地图上的点获取经纬度。这个名为“高德地图demo.rar”的压缩包包含了一个示例项目,用于演示这一功能。我们将讨论以下几个关键...
【百度地图选点定位demo】是一个基于百度地图API开发的应用示例,主要展示了如何在地图上进行精确的定位和选择兴趣点。这个demo是开发者学习和理解百度地图服务功能的一个重要资源,尤其对于那些需要在自己的应用中...
百度地图拖拽选点 可显示经纬度 经纬度: 地址: 最近的路口 最近的路 最近的POI
总的来说,"百度地图选点"涉及到的技术点包括:地图API的使用、地图交互事件的监听、坐标系统的理解、POI检索接口的调用以及数据的解析与展示。开发者通过熟练掌握这些技能,可以创建出丰富多样的地图应用,满足用户...
高德地图API提供了丰富的地理定位服务,包括获取当前位置、绘制地图、路径规划等。C#作为.NET框架的主要开发语言,非常适合构建这种桌面或Web应用。 首先,我们需要了解高德地图的API体系。高德地图提供了...
在Android开发中,仿微信发送位置和地图选点功能是一个常见的需求,特别是在社交应用中。这一功能涉及到的主要技术包括地图API的使用、定位服务、以及用户交互设计。本项目使用了百度地图SDK来实现这一功能,下面将...
本文将详细解析"百度地图中心选点坐标"这一主题,包括如何利用百度地图API获取中心点坐标,并针对提供的描述和标签进行深入讲解。 首先,百度地图是一个广泛使用的在线地图服务平台,它提供了丰富的地图API,允许...
基于cesium结合高德api做的路径规划.vue
地图选点google.zip