高德地图自定义定位 按钮

简介: 高德地图自定义定位 按钮

高德地图进行浏览器定位并自定义定位按钮

要在页面里引入高德地图API

<scriptsrc="https://webapi.amap.com/maps?v=1.3&key=你申请的key值&plugin=AMap.Walking"></script>

进行定位,先要去高德地图官网申请开发的key,这里官网文档写的很清楚。

然后按照API文档里接入js代码,引入后高德地图会默认给你一个定位按钮,这个按钮不能自定义,只能放在地图的四个角,不过可以自定义这个按钮的图标样式。

这里的小技巧就是在buttonDOM参数设置成一个隐藏的input,这样在地图上就看不到默认的定位按钮了。

varmap, geolocation;
//加载地图,调用浏览器定位服务map=newAMap.Map('dituContent', {
zoom: 16,
resizeEnable: true,
    });
map.plugin('AMap.Geolocation', function() {
geolocation=newAMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:truetimeout: 10000,          //超过10秒后停止定位,默认:无穷大buttonOffset: newAMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:falsebuttonDom:'<input hidden="true" >', 
buttonPosition:'RB'        });
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息    });
//解析定位结果functiononComplete(data) {
varstr=['定位成功'];
str.push('经度:'+data.position.getLng());
str.push('纬度:'+data.position.getLat());
if(data.accuracy){
str.push('精度:'+data.accuracy+' 米');
        }//如为IP精确定位结果则没有精度信息str.push('是否经过偏移:'+ (data.isConverted?'是' : '否'));
document.getElementById('tip').innerHTML=str.join('<br>');
    }
//解析定位错误信息functiononError(data) {
document.getElementById('tip').innerHTML='定位失败';
    }

然后在也面上自定义一个按钮,并绑定上定位的js方法。

<divid="dituContent"></div><divid="tip"></div><aonClick="geolocation.getCurrentPosition()"></a>  //这里是自订的按钮,帮上定位的方法。
目录
相关文章
|
消息中间件 物联网 网络安全
MQTT常见问题之调用.net sdk 报“不知道这样的主机”如何解决
MQTT(Message Queuing Telemetry Transport)是一个轻量级的、基于发布/订阅模式的消息协议,广泛用于物联网(IoT)中设备间的通信。以下是MQTT使用过程中可能遇到的一些常见问题及其答案的汇总:
|
前端开发
【前端】elementUI表格根据状态显示不同的字体颜色
【前端】elementUI表格根据状态显示不同的字体颜色
837 1
|
8月前
|
数据采集 缓存 监控
API使用全攻略:3步搞定跨境电商自动化,新手也能日省5小时!
2024年电商运营已进入自动化时代!告别手动搬砖,利用电商API实现商品信息抓取、订单同步、物流计算等自动化操作,零代码基础也能快速上手,每天节省5小时,利润提升30%。本文详解API使用三步法、高阶玩法如动态定价、物流优化及避坑指南,助你高效运营,轻松盈利。
|
数据采集 SQL 安全
2024年护网行动全国各地面试题汇总(5)
2024年护网行动全国各地面试题汇总(5)
|
前端开发 JavaScript 安全
如何在 React Native 中实现热更新?
如何在 React Native 中实现热更新?
1400 64
|
前端开发 JavaScript NoSQL
"从零到一:全方位解析现代Web开发技术栈
【7月更文挑战第9天】在当今快速发展的互联网时代,Web开发技术日新月异,为开发者提供了前所未有的创新空间。本文将从基础到高级,全面解析现代Web开发技术栈,帮助初学者或希望升级技能树的开发者构建稳固的知识体系。我们将探讨前端、后端以及全栈开发的关键技术,并通过一个简单的项目示例来演示这些技术的实际应用。
2003 1
|
Android开发
技术经验分享:Android前后台切换的监听
技术经验分享:Android前后台切换的监听
535 2
|
编解码 定位技术 Python
Python中ArcPy实现ArcGIS自动批量制图与地图要素批量设置
Python中ArcPy实现ArcGIS自动批量制图与地图要素批量设置
576 1
|
移动开发 监控 前端开发
2023 年大淘宝 Web 端技术概览
2022 年,大淘宝前端团队进行了调整:重新组织生产关系,按业务线拆分整合进对应的业务技术团队,同时保留了大前端虚线组织,确保研发基建的一致性、技术的持续投入以及推进人员的成长。 整个变化涉及超过三百人的前端团队,经过了半年多的运转,整个团队在技术上也进行了对应的聚焦和收敛。 新的组织协作形态下,大淘宝 Web 领域的工程师们正在做哪些技术工作、有什么技术产品,特在 2023 年开年之际向行业前端同学进行分享。
4765 1
2023 年大淘宝 Web 端技术概览