分類  >  Web前端 >

map上測量實際距離-百度map應用

tags:    時間:2013-12-09 23:32:31
地圖上測量實際距離---百度地圖應用
<!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;width:372px;overflow-y:auto;}         .sel_container{position:absolute;top:0;font-size:12px;}         .map_popup {position: absolute;z-index: 200000;width: 382px;height: 344px;top:20px;}         .map_popup .popup_main { background:#fff;border: 1px solid #8BA4D8;height: 100%;overflow: hidden;position: absolute;width: 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;width: 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="width: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>

推薦閱讀文章

Bookmark the permalink ,來源:互聯網