我做了一个html页面高德地图定位 怎么转成vue页面
发布于 1个月前 作者 fhd1992 877 次浏览 来自 问答

根据上个页面传过来的经纬度和地址定位 ,有经纬度就用经纬度定位,没有就看地址,有地址就用地址定位,都没有就用ip定位

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>经纬度->地址</title> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> <style> html,body,#container{ height:100%; width:100%; } .btn{ width:10rem; margin-left:6.8rem; } .info{ width:26rem; } </style> </head> <body>
点击地图获取经纬度。



经纬度
<input id='lnglat' type="text" value=''>
地址
<input id='address' type="text" value=''>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=e1ae4dc2fce9ff2025eee715f37a68b4&plugin=AMap.Geocoder"></script> <script type="text/javascript"> var map = new AMap.Map("container", { resizeEnable: true, zoom: 10 });
var geocoder,marker;
var lng;
var lat;

// var lng =’117.192485’; // var lat =’31.813242’; var address; // var address =’’; // var lnglat = [117.192485,31.813242]; window.onload=function(){ if (lng != undefined && lat !=undefined ){ document.getElementById(‘lnglat’).value =lng+’,’+lat; regeoCode(); return false; } else if(address != undefined){ document.getElementById(‘address’).value =address; geoCode(); return false; }else{ regeoCode2(); return false; } } //有经纬度方法 function regeoCode() { if(!geocoder){ geocoder = new AMap.Geocoder({ radius: 1000 //范围 }); }

    var lnglat  = document.getElementById('lnglat').value.split(',');

    if(!marker){
        marker = new AMap.Marker();
        map.add(marker); 
    }

    marker.setPosition(lnglat);
    map.setFitView();
    geocoder.getAddress(lnglat, function(status, result) {
        if (status === 'complete'&&result.regeocode) {
            var address = result.regeocode.formattedAddress;
            document.getElementById('address').value = address;
        }else{alert(JSON.stringify(result))}
    });
}
//无经纬度有地址
function geoCode() {
    if(!geocoder){
        geocoder = new AMap.Geocoder({
            radius: 1000 //范围
        });
    }
    var addres  = document.getElementById('address').value;
    geocoder.getLocation(addres, function(status, result) {
        if (status === 'complete'&&result.geocodes.length) {
            var lnglat = result.geocodes[0].location
            document.getElementById('lnglat').value = lnglat;
            if(!marker){
                marker = new AMap.Marker();
                map.add(marker);
            }
            marker.setPosition(lnglat);
            map.setFitView(marker);
        }else{alert(JSON.stringify(result))}
    });
}
//没有经纬度没地址方法
function regeoCode2() {
    AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位,默认:true
            timeout: 10000,          //超过10秒后停止定位,默认:5s
            buttonPosition:'LB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                onComplete(result)
            }else{
                onError(result)
            }
        });
    });
    //解析定位结果
    function onComplete(data) {
        document.getElementById('status').innerHTML='定位成功'
        document.getElementById('lnglat').value = data.position;
        regeoCode();
        return false;
    }  
    //解析定位错误信息
    function onError(data) {
        document.getElementById('status').innerHTML='定位失败'
        document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
    }
}
    //地图点击获取地址
map.on('click',function(e){
    document.getElementById('lnglat').value = e.lnglat;
    regeoCode();
})
</script> </body> </html>
2 回复

直接复制可以呢, 都是html + js

vue2还是3 我最近正好在vue里面加个地图 引入方法已经写入https://www.cnblogs.com/jinzhenzong/p/9993100.html 如果不是引入的问题,你可以加我qq421217189

回到顶部