<!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;100px;">打印坐标</div> <div id="allmap" style="float:left; 800px; height: 500px"></div> <div id="r-result" style="float:left;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>