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


<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>

你可能感兴趣的:(哈哈哈,百度地图,API,定位,三点定位)