上面是实现效果
首先设置HTML格式
<div class="locations">
<div class="bMap" class="layui-input-block" style="max-width:600px;">
<input type="hidden" name="lng" id="lng" value="114.474007" />
<input type="hidden" name="lat" id="lat" value="38.034332" />
<input type="button" id='sever_add' size="20" class="dizhi-txt" value="" value="拖拽地图获取位置信息" />
<input type="hidden" name="address" id='address' value=""/>
div>
<div class=" ">
<div class="map_us" id='allmap'>div>
div>
div>
获取坐标信息
引用插件和js
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=533ac127fae022429da22abea70e13fe">script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js">script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=533ac127fae022429da22abea70e13fe&plugin=AMap.ToolBar">script>
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1">script>
通过拖拽得到的经纬度去定位位置信息
<script>
var lng = $("#lng").val();
var lat = $("#lat").val();
//加载PositionPicker,loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
var map = new AMap.Map('allmap',{
zoom:16,
center:[lng,lat],
})
// 地图定位事件
AMap.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
});
map.addControl(geolocation);
if (lng == '') {
geolocation.getCurrentPosition();
}
});
var positionPicker = new PositionPicker({
mode:'dragMap',//设定为拖拽地图模式,可选'dragMap'、'dragMarker',默认为'dragMap'
map:map//依赖地图对象
});
// 定位成功和定位失败
positionPicker.on('success', function(positionResult) {
document.getElementById('lat').value = positionResult.position.lat;
document.getElementById('lng').value = positionResult.position.lng;
document.getElementById('sever_add').value = positionResult.address;
document.getElementById('address').value = positionResult.address;
});
positionPicker.on('fail', function(positionResult) {
positionPicker.start([116.434747,39.908133]);//开始拖拽
});
// 改变事件
var onModeChange = function(e) {
positionPicker.setMode(e.target.value)
}
positionPicker.start();//开始拖拽
map.panBy(0, 1);
// 控件
map.addControl(new AMap.ToolBar({
liteStyle: true,
position: {top:'10px',right:'10px'},
}))
});
script>
0条评论