master

分支 (1)

管理

管理

master

Bmap
/
PickUp.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" />
    <title>拾取坐标-百度地图API</title>
    <!-- css样式文件 -->
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            overflow: hidden;
        }

        #allmap {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #r-result {
            width: 100%;
            font-size: 14px;
            position: absolute;
            top: 10px;
            left: 200px
        }
    </style>

</head>

<body>
    <!-- 地图盒子 -->
    <div id="allmap"></div>
    <!-- 搜索显示框 -->
    <div id="r-result">
        地址: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
        <input type="button" value="搜索" onclick="theLocation()" /> 经度:
        <input type="text" id="lng" /> 纬度：
        <input type="text" id="lat" />
        <button onclick="submit()">提交</button>
    </div>
    <!-- js文件 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3&services=true"></script>
    <!-- 页面地图js方法 -->
    <script type="text/javascript">
        // 在指定容器创建地图实例并设置最大最小缩放级别
        var map = new BMap.Map("allmap", {
            minZoom: 5,
            maxZoom: 19
        });

        // 初始化地图，设置中心点和显示级别
        map.centerAndZoom(new BMap.Point(121.36564, 31.22611), 19);

        // 开启鼠标滚轮缩放功能，仅对PC上有效
        map.enableScrollWheelZoom(true);

        // 将控件（平移缩放控件）添加到地图上
        map.addControl(new BMap.NavigationControl());

        // 为地图增加点击事件，为input赋值
        map.addEventListener("click", function(e) {
            document.getElementById('lat').value = e.point.lat;
            document.getElementById('lng').value = e.point.lng;

        });

        // 创建位置检索、周边检索和范围检索
        var local = new BMap.LocalSearch(map, {
            renderOptions: {
                map: map
            }
        });

        // 发起检索
        function theLocation() {
            var city = document.getElementById("cityName").value;
            if (city != "") {
                local.search(city);
            }
        };

        // 弹出经纬度
        function submit() {
            var lat = document.getElementById('lat');
            var lng = document.getElementById('lng');
            alert("经度：" + lng.value + "\n" + "纬度：" + lat.value);
        };
    </script>
</body>

</html>