zoukankan      html  css  js  c++  java
  • 地图上测量实际距离---百度地图应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    
        <!--切换城市部分  Begin-->
        <style>
    	    .cityList{height: 320px;372px;overflow-y:auto;}
            .sel_container{position:absolute;top:0;font-size:12px;}
            .map_popup {position: absolute;z-index: 200000; 382px;height: 344px;top:20px;}
            .map_popup .popup_main { background:#fff;border: 1px solid #8BA4D8;height: 100%;overflow: hidden;position: absolute; 100%;z-index: 2;}
            .map_popup .title {background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
            color: #6688CC;font-size: 12px;font-weight: bold;height: 24px;line-height: 25px;padding-left: 7px;}
            .map_popup button {background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
            border: 0 none;cursor: pointer;height: 12px;position: absolute;right: 4px;top: 6px; 12px;}	
        </style>
        <!--切换城市部分  End-->
    
        <title>城市切换与测距+缩放</title>
        <!--切换城市部分  Begin-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
        <!--切换城市部分  End-->
        <!--测距部分    Begin-->
        <script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
        <!--测距部分    End-->
        <!--缩放部分    Begin       ak:个人百度密钥,在正式上线时要注册公司密钥进行切换-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aaa561c7aaaa060baf565197c317aaa"></script>
        <!--缩放部分    End-->
    </head>
    <body>
        <div style="520px;height:340px;border:1px solid gray;margin-top:50px;" id="container">
        </div>
        <div class="sel_container"><strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div>
        <div class="map_popup" id="cityList" style="display:none;">
            <div class="popup_main">
                <div class="title">城市列表</div>
    		    <div class="cityList" id="citylist_container"></div>
                <button id="popup_close"></button>
            </div>
        </div>
        <input type="button" value="开启" onclick="myDis.open();" />
        <input type="button" value="关闭" onclick="myDis.close()" />
    
        <script type="text/javascript" >
            // 新创建地图
            var map = new BMap.Map("container");
            //116.404, 39.915:表示中心点的位置
            //13表示缩放大小,数值越大表示显示越详细(朝阳,昌平),越小显示就越广泛(北京,上海),建议保持13
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
            // 测距部分   Begin
            var myDis = new BMapLib.DistanceTool(map);
            // 测距部分   End
    
            //缩放部分  Begin
            map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
            map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }));  //右上角,仅包含平移和缩放按钮
            map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN }));  //左下角,仅包含平移按钮
            map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM }));  //右下角,仅包含缩放按钮
            //缩放部分  End
    
            // 创建CityList对象,并放在citylist_container节点内
            var myCl = new BMapLib.CityList({ container: "citylist_container", map: map });
    
            // 给城市点击时,添加相关操作
            myCl.addEventListener("cityclick", function (e) {
                // 修改当前城市显示
                document.getElementById("curCity").innerHTML = e.name;
    
                // 点击后隐藏城市列表
                document.getElementById("cityList").style.display = "none";
            });
    
            // 给“更换城市”链接添加点击操作
            document.getElementById("curCityText").onclick = function () {
                var cl = document.getElementById("cityList");
                if (cl.style.display == "none") {
                    cl.style.display = "";
                } else {
                    cl.style.display = "none";
                }
            };
    
            // 给城市列表上的关闭按钮添加点击操作
            document.getElementById("popup_close").onclick = function () {
                var cl = document.getElementById("cityList");
                if (cl.style.display == "none") {
                    cl.style.display = "";
                } else {
                    cl.style.display = "none";
                }
            };
        </script>
    </body>
    </html>


  • 相关阅读:
    .NET 操作XML
    C#常用操作类库五(电脑操作类)
    C#常用操作类库四(File操作类)
    C#常用操作类库一(验证类)
    RabbitMQ 学习
    redis 常用命令
    windows10配置redis一主二从三哨兵
    Oracle递归查询(查询当前记录所有父级或子级)
    echarts 中 柱图 、折线图、柱图层叠
    简单的前台登录
  • 原文地址:https://www.cnblogs.com/suncoolcat/p/3400115.html
Copyright © 2011-2022 走看看