html实现可拖拽地图+定位到目前位置高德

直接上代码

拖拽选址

<script type="text/javascript">AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {var map = new AMap.Map('container', {zoom: 16,scrollWheel: false});map.plugin(['AMap.Geolocation','AMap.ToolBar'], function () {var toolbar = new AMap.ToolBar();map.addControl(toolbar);var geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默认:truetimeout: 5000,           // 超过5秒后停止定位，默认：无穷大maximumAge: 0,            // 定位结果缓存0毫秒，默认：0convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true,         // 显示定位按钮，默认：truebuttonPosition: 'LB',     // 定位按钮停靠位置，默认：'LB'，左下角buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: true,         // 定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true,         // 定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true,      // 定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息AMap.event.addListener(geolocation, 'error', onError);       // 返回定位出错信息});var positionPicker = new PositionPicker({mode: 'dragMap',map: map});function onComplete(obj){console.log("成功");}function onError(obj) {console.log("失败");}positionPicker.on('success', function(positionResult) {console.log(positionResult);var sheng=positionResult.regeocode.addressComponent.province;var shi=positionResult.regeocode.addressComponent.city;var qx=positionResult.regeocode.addressComponent.district;var jd=positionResult.regeocode.addressComponent.township+positionResult.regeocode.addressComponent.street+positionResult.regeocode.addressComponent.streetNumber;console.log(sheng+shi+qx+jd);});positionPicker.on('fail', function(positionResult) {console.log(positionResult);});positionPicker.start();map.panBy(0, 1);map.addControl(new AMap.ToolBar({liteStyle: true}))});
</script>
<style>
html,
body {height: 100%;margin: 0;width: 100%;padding: 0;overflow: hidden;font-size: 13px;
}.map {height: 100%;width: 100%;float: left;
}</style>

html实现可拖拽地图+定位到目前位置高德相关推荐

android 高德拖拽地图定位,拖拽选址-拖拽选址-示例中心-JS API UI 组件示例 | 高德地图API...
拖拽选址 html, body { height: 100%; margin: 0; width: 100%; padding: 0; overflow: hidden; font-size: 13p ...
android百度地图拖拽地图定位,百度地图，拖动地图，定位marker固定在屏幕中心位置...
以下为百度地图相关效果图: 注:该例子主要思路是将覆盖物(marker)通过css定位上去的,但是存在一个问题,当浏览器窗口宽度改变时,覆盖物会自动定位到地图中心位置,但是地图可能不会. map ht ...
android百度地图拖拽地图定位,百度地图的定位以及拖拽（显示坐标位置）
搜索热词截图示例 html{height:100%} body{height:100%;margin:0px;padding:0px} #map_canvas{ margin:0 auto; bor ...
【玩转cocos2d-x之十八】仿《中国好学霸》文字拖拽和定位
原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/13287519 现在各种猜成语猜歌名好学霸之类的游戏火的一塌糊涂.本节就介绍下 ...
微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...
高德地图定位拖动改变位置
现在关于地图使用越来越多,相信大家可能都或多或少的用到过,本篇文章简单总结了一下关于高德地图定位且可以拖动改变位置的功能的实现. 首先按照高德开发文档,导入jar包,申请key,可以在高德地图的开放平 ...
sortable 拖拽时互换目标的位置_报表如何实现行列互换效果？
通常我们设计的二维的交叉报表,横向的维度和纵向的维度是固定的,而用户希望更希望能根据自己的需要快速转换横向纵向维度来查看报表. 如上图所示,我们通过点击一个按钮或文字,就可将报表的行列维度互相转换,这 ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
vue 拖拽小图标获取坐标位置
遇到一个功能,在固定的一张图或者说一个框内有一个小图标可以拖拽,并且能拿到他当前位置的坐标,如下图二维码小图标代码如下 <!-- 拖拽小图标 v-drag:拖拽效果,配置当前元素positio ...

html实现可拖拽地图+定位到目前位置高德

html实现可拖拽地图+定位到目前位置高德相关推荐

最新文章

热门文章

html实现可拖拽地图+定位到目前位置 高德

html实现可拖拽地图+定位到目前位置 高德相关推荐

最新文章

热门文章

html实现可拖拽地图+定位到目前位置高德

html实现可拖拽地图+定位到目前位置高德相关推荐