`
walker_v5
  • 浏览: 34534 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

高德地图,选点,移除点。

阅读更多

找了很多资料,自己写的在高德地图添加围栏,选点的功能。

<!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 就是围栏的数组

 

 

 

0
0
分享到:
评论

相关推荐

    仿微信发送位置、地图选点(高德地图)

    总之,`GaodeMapDemo`项目是一个典型的Android地图应用示例,它涵盖了高德地图API的基本使用,以及如何在Android应用中实现地图选点和位置发送功能。对于想要学习Android地图开发的开发者来说,这是一个非常有价值的...

    vue使用elementui结合高德地图的定位以及位置显示

    在Vue.js应用中,ElementUI是一个非常流行的前端组件库,提供了丰富的UI元素和交互设计,而高德地图则是一款强大的地图服务提供商,提供地图展示、定位、路线规划等功能。将ElementUI与高德地图结合,可以创建出具有...

    高德地图实现多边形框选选中地图中坐标点.html

    高德地图实现多边形框选,选中展示地图中坐标点。实现坐标点框选。范围内坐标点选择。包括矩形,圆形,和任意多边形。。。需要修改key为自己注册的开发key

    高德地实实现地点搜索和路线规划及保存操作

    高德地图API是一个强大的工具,允许开发者实现丰富的地图功能,如地点搜索、路线规划以及路线保存等。以下是对这些功能的详细解释: 1. **地点搜索**: 高德地图API提供了地点搜索服务,允许用户通过关键字查询...

    高德地图将marker用连线连起来

    在使用高德地图进行开发时,我们经常需要在地图上展示一些特定的点,并且有时候这些点之间需要通过连线来表示某种关系或者路径。标题"高德地图将marker用连线连起来"所指的就是如何在高德地图API中实现这样的功能,...

    前端项目vue3结合高德地图实战,可直接运行

    这个项目不仅展示了如何在Vue3环境中引入和使用高德地图,还涵盖了地图的基本操作,如显示地图、添加和删除标记点。下面我们将详细探讨其中涉及的关键知识点。 1. **Vue3框架**: Vue3是Vue.js的最新版本,提供了...

    js-vue-高德-实时定位.zip vue集成高德地图,实时定位用户当前位置经纬度,并在高德地图上显示具体位置

    js-vue-高德-实时定位.zip vue集成高德地图,实时定位用户当前位置经纬度,并在高德地图上显示具体位置 方法简便,丢入即可使用 vue集成高德地图,实时获取用户的位置经纬度,并在地图显示具体位置

    微信小程序 高德地图路线规划实现过程详解

    高德地图 火星坐标(GCJ-02) 微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时,需要注意坐标的转换。此类坐标的转换函数在网上都有,这里不做过多解释 准备工作: 1、在做小程序 —- 路线规划之前,...

    高德地图 ->选点,地址搜索,坐标逆解析

    高德地图 -&gt;选点,地址搜索,坐标逆解析

    vue+地图选点组件(百度地图)

    本组件是用于在地图上选点、回显坐标等

    vue基于Vue2.0和高德地图的地图组件实例

    Vue 基于 Vue 2.0 和高德地图的地图组件实例 知识点一:vue-amap 的介绍 vue-amap 是一个基于 Vue 2.0 和高德地图的地图组件实例,旨在让开发者在编写地图应用时,能够从查找众多地图 API 和繁琐的地图状态同步中...

    高德地图demo.rar

    在本文中,我们将深入探讨如何将高德地图集成到HTML5(H5)页面中,以及如何通过选择地图上的点获取经纬度。这个名为“高德地图demo.rar”的压缩包包含了一个示例项目,用于演示这一功能。我们将讨论以下几个关键...

    百度地图选点定位demo

    【百度地图选点定位demo】是一个基于百度地图API开发的应用示例,主要展示了如何在地图上进行精确的定位和选择兴趣点。这个demo是开发者学习和理解百度地图服务功能的一个重要资源,尤其对于那些需要在自己的应用中...

    百度地图拖拽选点

    百度地图拖拽选点 可显示经纬度 经纬度: 地址: 最近的路口 最近的路 最近的POI

    百度地图选点

    总的来说,"百度地图选点"涉及到的技术点包括:地图API的使用、地图交互事件的监听、坐标系统的理解、POI检索接口的调用以及数据的解析与展示。开发者通过熟练掌握这些技能,可以创建出丰富多样的地图应用,满足用户...

    C#实现高德地图定位(包含登录,注册)

    高德地图API提供了丰富的地理定位服务,包括获取当前位置、绘制地图、路径规划等。C#作为.NET框架的主要开发语言,非常适合构建这种桌面或Web应用。 首先,我们需要了解高德地图的API体系。高德地图提供了...

    仿微信发送位置、地图选点(百度地图)

    在Android开发中,仿微信发送位置和地图选点功能是一个常见的需求,特别是在社交应用中。这一功能涉及到的主要技术包括地图API的使用、定位服务、以及用户交互设计。本项目使用了百度地图SDK来实现这一功能,下面将...

    百度地图中心选点坐标

    本文将详细解析"百度地图中心选点坐标"这一主题,包括如何利用百度地图API获取中心点坐标,并针对提供的描述和标签进行深入讲解。 首先,百度地图是一个广泛使用的在线地图服务平台,它提供了丰富的地图API,允许...

    基于cesium结合高德api做的路径规划.vue

    基于cesium结合高德api做的路径规划.vue

    地图选点google.zip

    地图选点google.zip

Global site tag (gtag.js) - Google Analytics