15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 js

获取位置,拖拽地图,引用<高德地图>,位置经纬度

教腾豪| 发布于 2021-11-03 18:56:32| 97阅读| 0点赞| 0评论
举报

拖拽获取位置,引用高德地图插件,位置经纬度



上面是实现效果

首先设置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

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

教腾豪
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部