百度地图 API 实现传说中的三点定位。

lyfGeek

已于 2023-02-12 18:17:53 修改

阅读量1.6k

点赞数 1

分类专栏：开发。文章标签：百度地图 API 定位三点定位

于 2020-05-30 22:44:19 首次发布

本文链接：https://blog.csdn.net/lyfGeek/article/details/106448552

版权

开发。专栏收录该内容

97 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "楷体";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
    <title>Geek 三点定位。</title>
</head>

<body>

<div id="allmap"></div>


<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");// 创建Map实例
    map.centerAndZoom(new BMap.Point(114.311104, 30.591177), 11);// 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
        //    BMAP_NORMAL_MAP 	此地图类型展示普通街道视图
        //     BMAP_SATELLITE_MAP 	此地图类型展示卫星视图
        //     BMAP_HYBRID_MAP 	此地图类型展示卫星和路网的混合视图
    }));
    map.setCurrentCity("武汉");// 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);// 开启鼠标滚轮缩放

    // 给地图添加点击事件，弹出距离输入对话框。
    map.addEventListener("click", function (e) {
        var ds = window.prompt("Input Distance:(M)", "");

        var pt = e.point;
        // 添加点。
        var marker = new BMap.Marker(pt);
        map.addOverlay(marker);
        marker.enableDragging();

        // 给图标添加右键监听，删除该位置及范围。
        marker.addEventListener("rightclick", function (e) {
            map.removeOverlay(marker);
            map.removeOverlay(circle);
        });

        // 地图范围圆形覆盖物。
        // 创建圆。point（pt）, ds。
        var circle = new BMap.Circle(pt, ds);
        circle.setStrokeWeight(2);
        circle.setStrokeOpacity(0.35);
        map.addOverlay(circle);

        // 给图标添加拖拽监听。
        marker.addEventListener("dragging", function (e) {
            circle.setCenter(e.point);
        });

    });

</script>


</body>
</html>