高德地图自定义定位 按钮

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

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

要在页面里引入高德地图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>  //这里是自订的按钮,帮上定位的方法。
目录
相关文章
|
1月前
|
Android开发
热点共享蓝条下压,导致页面底部按钮显示不全的完美解决方案
热点共享蓝条下压,导致页面底部按钮显示不全的完美解决方案
12 0
|
1月前
|
前端开发 JavaScript 定位技术
高德地图实现-自定义信息窗+窗体点击事件
高德地图实现-自定义信息窗+窗体点击事件
|
11月前
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
211 0
|
11月前
|
移动开发 JavaScript 定位技术
百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
257 0
|
11月前
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
85 0
uniapp上传预览大图-带删除按钮-摄像机-相册
uniapp上传预览大图-带删除按钮-摄像机-相册
|
11月前
|
移动开发 定位技术 API
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
351 0
|
11月前
|
前端开发 定位技术
百度地图开发自定义信息窗口openInfoWindow样式的解决方案
百度地图开发自定义信息窗口openInfoWindow样式的解决方案
953 0
|
11月前
|
移动开发 定位技术
百度地图H5手机端自动定位并更换图标的解决方案
百度地图H5手机端自动定位并更换图标的解决方案
135 0
|
12月前
|
搜索推荐 JavaScript 定位技术
百度地图绘制地区的棱柱效果-定位-自定义点-文本标记-信息弹窗
百度地图绘制地区的棱柱效果-定位-自定义点-文本标记-信息弹窗
177 0