地图上测量实际距离---百度地图应用
<!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>