<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>16.1</title> <script type=text/javascript src=http://fw.qq.com/ipaddress></script> <script type="text/javascript"> var iscreatr = false; //是否創建 var map; // 百度地圖 var marker; // 標注 var markX; // 標注x var markY; // 標注y //加載完地圖回調 function initialize() { //---------------------------------------------基礎示例--------------------------------------------- map = new BMap.Map("allmap", { minZoom: 12, maxZoom: 20 }); // 創建Map實例 //map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化時，即可設置中心點和地圖縮放級別。 map.centerAndZoom("成都", 13); // 初始化地圖,設置中心點坐標和地圖級別。 map.enableScrollWheelZoom(true); //鼠標滑動輪子可以滾動 map.addEventListener("click", function (e) { if (iscreatr == true) return; //---------------------------------------------創建標注--------------------------------------------- iscreatr = true; markX = e.point.lng; markY = e.point.lat; var point = new BMap.Point(e.point.lng, e.point.lat); //默認 // 創建標注對象並添加到地圖 marker = new BMap.Marker(point); var label = new BMap.Label("我是可以拖動的，右鍵取消的", { offset: new BMap.Size(20, -10) }); marker.setLabel(label) map.addOverlay(marker); marker.enableDragging(); //可拖拽 marker.addEventListener("dragend", function (e) { //標注拖動事件 markX = e.point.lng; markY = e.point.lat; document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat; //打印拖動結束坐標 }); }); //---------------------------------------------鼠標右鍵取消標注操作--------------------------------------------- var menu = new BMap.ContextMenu(); //右鍵菜單 var txtMenuItem = [ //右鍵菜單項目 { text: '取消', callback: function () { map.removeOverlay(marker); iscreatr = false; } } ]; for (var i = 0; i < txtMenuItem.length; i++) { menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)); //菜單添加項目 } map.addContextMenu(menu); } function loadScript() { var script = document.createElement("script"); script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript; //------------------------------------- //切換地圖 function changeType(value) { map.setCenter(value); } //提交 function submit() { if (iscreatr == true) { alert(markX + ":" + markY); } } </script> </head> <body> <div id="r-result" style="float:left;width:100px;">打印坐標</div> <div id="allmap" style="float:left;width: 800px; height: 500px"></div> <div id="r-result" style="float:left;width:100px;"> <input type="button" onclick="submit()" value="提交" /></br> 切換城市：<select onchange="changeType(this.value)" > <option value ="北京">北京</option> <option value ="廣州">廣州</option> <option value="成都">成都</option> </select> </div> </body> <script type="text/javascript"> // 移動到某點 map.panTo(new BMap.Point(116.409, 39.918)); // 移動到某城市 map.setCenter("廣州"); //兩秒后移動到廣州 // map.setZoom(14); //放到到14級 </script>