首页 - 崮生写笔记的地方

高德地图

<div id="container"></div>
<div id="panel" title="需要这个来展示路径"> </div>
<style>
    #container {
        width: 600px;
        height: 400px;
    }
</style>
<script>
    var map
    function main() {
        /** 地图对象 */
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        /** 规划路线 */
        var planPath
        /** 添加定位按钮 */
        AMap.plugin(['AMap.Geolocation', 'AMap.Walking', 'AMap.Driving'], function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位,默认:true
                timeout: 10000,          //超过10秒后停止定位,默认:5s
                buttonPosition: 'RB',    //定位按钮的停靠位置
                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)
                }
            });
        });
        planPath = (function (map) {
            //构造路线导航类
            var navigation = {
                driving: new AMap.Driving({
                    map: map,
                    panel: "panel" //用来展示仪表板的元素的id
                }),
                walking: new AMap.Walking({
                    map: map,
                    panel: "panel"
                }),
            }

            /** 通过什么类型的工具进行 */
            var walkingType
            return function (p1, p2,/** 交通工具的类型 */ type) {
                // 根据起终点经纬度规划驾车导航路线
                navigation[type].search(p1, p2, function (status, result) {
                    // result 即是对应的驾车导航信息,相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                    if (status === 'complete') {
                        console.log('绘制驾车路线完成');
                    } else {
                        console.error('获取驾车数据失败:' + result)
                    }
                });
            }
        })(map)
        var localPosition
        //解析定位结果
        function onComplete(data) {
            var str = [];
            localPosition = data.position
            str.push('定位结果:' + data.position);
            str.push('定位类别:' + data.location_type);
            if (data.accuracy) {
                str.push('精度:' + data.accuracy + ' 米');
            }//如为IP精确定位结果则没有精度信息
            str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
        }
        //解析定位错误信息
        function onError(data) {
            console.log('定位失败', data);
        }



        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function (e) {
            console.log("经纬度", e.lnglat.getLng(), e.lnglat.getLat());
            var position = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
            /** 添加简单的标识 */
            const marker = new AMap.Marker({
                position: position,
                offset: new AMap.Pixel(-10, -10),
                icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
                title: `${e.lnglat.getLng()}--${e.lnglat.getLat()} 该点离你 ${distance(localPosition, position)} 米`
            })
            map.add(marker);
            marker.on('click', function (e) {
                console.log(this.title);
                planPath(localPosition, position, 'walking')
            })
        });
        /** 获取两点之间的距离 */
        function distance(p1, p2) {
            return Math.round(p1.distance(p2));
        }
    }

    function addScript(url, cb) {
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.head.appendChild(jsapi);
        jsapi.onload = cb
    }
    addScript('//webapi.amap.com/maps?v=1.4.14&key=2b6bf6b72d9056ff8885a005a816c711', function () {
        addScript('//webapi.amap.com/ui/1.0/main.js?v=1.0.11', function () {
            addScript('//cache.amap.com/lbs/static/addToolbar.js', function () {
                main()

            })
        })
    })

</script>
代码库-git