【高德地图】浏览器定位/ip定位+地图绘制/多点标记

最新推荐文章于 2024-05-19 22:05:56 发布

longlongfishday

最新推荐文章于 2024-05-19 22:05:56 发布

阅读量929

点赞数

分类专栏：前端 JQ 文章标签：高德api js 前端

本文链接：https://blog.csdn.net/m0_37715455/article/details/100977466

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

①通过浏览器定位（浏览器定位不准确，且存在各种浏览器问题）

<!--enlarge.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="Cache-Control" content="no-transform ">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="../0915/layui/css/layui.css">
    <script src="../0915/jquery/jquery-3.4.1.min.js"></script>
    <script src="./layui/layui.all.js"></script>
    <script src='../0915/enlarge.js'></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值&plugin=AMap.Driving"></script>
</head>
<body >
    <div id="mapdiv" style="display:inline-block">
        <div id="container" style="width: 400px;height:400px"></div>
        <div id="tip"></div>
    </div>
</body>
</html>

js进行初始化与实例实

/*enlarge.js*/
$(function(){
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        //zoom:13, //初始化地图层级
        // center: [116.397428, 39.90923] //初始化地图中心点
    });
    map.plugin('AMap.Geolocation',function(){
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 10000, //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB'
        });
        document.getElementById('tip').innerHTML="定位中，请勿操作，否则会定位失败";
        document.getElementById("tip").style.color="red";
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
    })
    function onComplete(data) {
    
        var str = [];
        //获取当前的经纬度
        Lat = data.position.getLat();
        Lng = data.position.getLng();
        console.log("Lng222",Lng)
        console.log("Lat222",Lat)
    
        console.log(data.position.getLat());
        console.log(data.position.getLng());
        str.push(data.position.getLat());
        str.push(data.position.getLng());
        //document.getElementById('tip').innerHTML = str;
        document.getElementById('tip').innerHTML="定位成功";
        document.getElementById("tip").style.color="#15A3FA";
        // setTimeout(tishi,3000);
    }
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败请刷新再试';
    }
})

实现结果如下：

②显示两点之间的路线（驾车路线为例子）

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值&plugin=AMap.Driving"></script>

    if(driving){
        //清除上一次的地图 不清除绘制多条路线
        driving.clear();
    }
    driving.search(new AMap.LngLat(Lng, Lat), new AMap.LngLat(data.longitude, data.latitude), function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
            log.success('绘制驾车路线完成')
        } else {
            log.error('获取驾车数据失败：' + result)
        }
    });

③通过ip定位(定位到当前所在城市中心）

var map,Pos,marker    
//地图初始化
    map = new AMap.Map('container',{
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:10, //初始化地图层级
    });
    map.plugin(["AMap.ToolBar"], function() {
        map.addControl(new AMap.ToolBar());
    });
    map.clearMap();  // 清除地图覆盖物


    Pos = map.getCenter()
    console.log("POS",Pos)

//起点定位
    marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: Pos,
        offset: new AMap.Pixel(-13, -30)
    });
    marker.setMap(map);

终点标记，不清空显示多点标记

                    if(marker2){
                        marker2.setMap(null);
                    }

                   marker2 = new AMap.Marker({
                        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                        position: [data.longitude, data.latitude],
                        offset: new AMap.Pixel(-13, -30)
                    });
                    marker2.setMap(map);

显示结果如下

longlongfishday

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【高德地图】浏览器定位/ip定位+地图绘制/多点标记

①通过浏览器定位（浏览器定位不准确，且存在各种浏览器问题）<!DOCTYPE html><html lang="en"><head> <meta name="applicable-device" content="pc,mobile"> <meta http-equi...
复制链接

扫一扫

专栏目录