百度地图API-记录功能文档

最新推荐文章于 2024-03-05 16:35:07 发布

月薪2500的狗头

最新推荐文章于 2024-03-05 16:35:07 发布

阅读量178

点赞数

分类专栏： dogExp 文章标签： api js

本文链接：https://blog.csdn.net/qq_43297527/article/details/104754720

版权

dogExp 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

百度地图API-记录功能文档

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body,
        html,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
            font-weight: 700;
        }
    </style>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=这里是 ak 密钥值 "></script>
    <title>百度地图API-记录功能文档</title>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new BMap.Map('map') // 创建 map 实例


        map.centerAndZoom(new BMap.Point(120.21937542, 30.25924446), 9); // 初始化地图，设置中心坐标点和地图缩放级别


        map.addControl(new BMap.NavigationControl()) // 添加左上角 比例工具尺


        map.enableScrollWheelZoom(true) // 开启鼠标滚动缩放


        map.addControl(new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP], // [地图类型, 卫星类型, 混合类型]
            anchor: BMAP_ANCHOR_TOP_RIGHT // 显示在右上角
        })) // 显示 地图类型控件


        var geolocationControl = new BMap.GeolocationControl() // 获取定位控件实例, 添加监听事件
        geolocationControl.addEventListener('locationSuccess', (res) => {
            // 定位成功事件
            console.log(res)
        })
        geolocationControl.addEventListener('locationError', (err) => {
            // 定位失败事件
            console.log(err)
            alert(err.message)
        })
        map.addControl(geolocationControl) // 添加 定位控件


        onLatAndLon() //一开始默认显示线路及标点信息


        // 监听地图缩放级别结束时 zoomend 事件
        map.addEventListener('zoomend', (e) => {
            // 地图级别 3 - 19 
            let nowZoom = map.getZoom() //获取当前地图缩放级别
            if (nowZoom >= 10) {
                onLatAndLon() // 显示线路及标点信息
            } else {
                map.clearOverlays(); // 清除线路及标点信息
            }
        })

        
        function onLatAndLon() {
            // 路线 经纬度坐标

            let ENList = [
                [
                    new BMap.Point(120.21937542, 30.29025555),
                    new BMap.Point(120.51937542, 30.27025555),
                    new BMap.Point(120.31937542, 30.25025555),
                    new BMap.Point(120.21937542, 30.23025555),
                    new BMap.Point(120.11937542, 30.21025555),
                ],
                [
                    new BMap.Point(120.21937542, 31.39025555),
                    new BMap.Point(120.21937542, 31.37025555),
                    new BMap.Point(120.21937542, 31.35025555),
                    new BMap.Point(120.21937542, 31.33025555),
                    new BMap.Point(120.21937542, 31.31025555),
                ]
            ]
            ENList.forEach((item, index) => {
                onMaker(item)
            })
        }

        function onMaker(ENList) {
            // 创建路线
            var polyline = new BMap.Polyline(ENList, {
                strokeColor: "#000", // 颜色
                strokeWeight: '8', // 宽度
                strokeOpacity: 1 // 透明度  取值范围0 - 1
            })
            map.addOverlay(polyline) // 添加路线

            // 创建路线标点图标
            var myIcon = new BMap.Icon('这里替换为本地图片路径(xxx.png)', new BMap.Size(70, 70), { imageSize: new BMap.Size(70, 70) }) // 标点图片, 图片大小，图片大小
            var n = 9
            for (let i = 0; i < ENList.length; i++) {
                var marker = new BMap.Marker(ENList[i], { icon: myIcon }) // 替换为设置好的标点样式
                label = new BMap.Label('120.2E-30.2' + n + 'N', { offset: new BMap.Size(60, 50) }); // 添加当前标点的标题
                marker.setLabel(label); // 添加标题
                map.addOverlay(marker) // 添加标点
                // marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 添加动画 (bug: 缩放地图后 会重叠标点)
                // 添加标点 点击事件
                marker.addEventListener('click', (e) => {
                    let p = e.target.point
                    alert('经度：' + p.lng + '  纬度：' + p.lat)
                })
                n = n - 2
            }
        }
    </script>
</body>

</html>