- <!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" />
- <title>无标题文档</title>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
- <style>
- #mapbox{width:850px;height:420px; position:absolute; background-color:#CCC; border:1px solid #9CF; font-size:12px;left:200px; top:50px;}
- #mapbox #map{width:600px;height:400px; float:left;}
- #mapbox #results{width:250px; margin-top:10px; float:right;}
- .mapheader{ height:25px;width:250px; float:right; overflow:hidden;}
- #mapbox h2{ margin:1px; padding-left:10px; height:20px; line-height:20px; font-size:12px; color:#0066CC; font-weight:100; background:#9CF; cursor:move}
- #mapbox .close{ display:block; position:absolute; right:10px; top:0px; line-height:22px; text-decoration:none; color:#0000}
- </style>
- </head>
- <body>
- <div id="mapbox">
- <h2 onmousedown="drag(this.parentNode,event)">百度地图<a href="javascript:" onclick="document.getElementById('div').style.display='none'" class="close">×</a></h2>
- <div class="mapheader"><input type="text" id="searchtext" /><input type="button" value="搜索" id="searchbt" onclick="serachlocal()" />
- </div>
- <div id="map"></div>
- <div id="results"></div>
- <div id="mapx"></div>
- <div id="mapy"></div>
- <div id="level"></div>
- </div>
- <script type="text/javascript">
- var map = new BMap.Map("map"); // 创建地图实例
- var point = new BMap.Point(116.404, 39.915); // 创建点坐标
- map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
- /*
- 1.
- NavigationControl:地图平移缩放控件,默认位于地图左上方,它包含控制地图的平移和缩放的功能。
- OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
- ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。
- MapTypeControl:地图类型控件,默认位于地图右上方。
- CopyrightControl:版权控件,默认位于地图左下方。
- */
- //配置控件参数
- //var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
- //map.addControl(new BMap.NavigationControl(opts));
- map.addControl(new BMap.NavigationControl());
- map.addControl(new BMap.ScaleControl());
- //map.addControl(new BMap.OverviewMapControl());
- //map.addControl(new BMap.MapTypeControl());
- //map.setCurrentCity("台州");
- /*
- var marker = new BMap.Marker(point); // 创建标注
- map.addOverlay(marker);
- var opts = {
- //width : 250, // 信息窗口宽度
- //height: 100, // 信息窗口高度
- title : "Hello" // 信息窗口标题
- }
- var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
- map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
- */
- map.enableScrollWheelZoom();//滚轮缩放事件
- //map.enableKeyboard(); //键盘方向键缩放事件
- map.enableContinuousZoom(); // 开启连续缩放效果
- //map.enableInertialDragging(); // 开启惯性拖拽效果
- map.addEventListener("click", function(e){ //点击事件
- //alert(e.point.lng + ", " + e.point.lat);
- document.getElementById("mapx").innerHTML="鼠标当前x位置:"+e.point.lng;
- document.getElementById("mapy").innerHTML="鼠标当前y位置:"+e.point.lat;
- document.getElementById("level").innerHTML="缩放等级:"+this.getZoom();
- });
- map.addEventListener("dragend", function(){ //拖拽事件
- var center = map.getCenter();
- document.getElementById("mapx").innerHTML="拖拽后中心x位置:"+center.lng;
- document.getElementById("mapy").innerHTML="拖拽后中心y位置:"+center.lat;
- document.getElementById("level").innerHTML="缩放等级:"+this.getZoom();
- //alert("地图中心点变更为:" + center.lng + ", " + center.lat);
- });
- map.addEventListener("zoomend", function(){ //缩放事件
- //alert("地图缩放至:" + this.getZoom() + "级");
- });
- /*自定义搜索1*/
- function serachlocal1(){
- //alert(document.getElementById("searchtext").value);
- var local = new BMap.LocalSearch(map, {renderOptions:{map: map}});
- local.search(document.getElementById("searchtext").value);
- }
- /*自定义搜索2*/
- function serachlocal(){
- var local = new BMap.LocalSearch(map, {
- renderOptions: {
- map: map,
- panel: "results",//结果容器id
- autoViewport: true, //自动结果标注
- selectFirstResult: true //指定到第一个目标
- },
- pageCapacity: 8
- });
- local.search(document.getElementById("searchtext").value);
- }
- /*自定义搜索回调数据
- var options = {
- onSearchComplete: function(results){
- if (local.getStatus() == BMAP_STATUS_SUCCESS){
- // 判断状态是否正确
- var s = [];
- for (var i = 0; i < results.getCurrentNumPois(); i ++){
- s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
- }
- document.getElementById("log").innerHTML = s.join("");
- }
- }
- };
- var local = new BMap.LocalSearch(map, options);
- local.search("公园"); */
- function serachlocal3(){
- var myGeo = new BMap.Geocoder();
- // 将地址解析结果显示在地图上,并调整地图视野
- myGeo.getPoint("北京市海淀区上地10街10号", function(point){
- if (point) {
- map.centerAndZoom(point, 16);
- map.addOverlay(new BMap.Marker(point));
- alert(point.lng+"#"+point.lat);
- var opts = {
- //width : 250, // 信息窗口宽度
- //height: 100, // 信息窗口高度
- title : "北京市海淀区上地10街10号" // 信息窗口标题
- }
- var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
- map.openInfoWindow(infoWindow, map.getCenter());
- }
- }, "北京市");
- }
- </script>
- <script type="text/javascript">
- function drag(obj,e){
- var e=e ? e : event;
- var mouse_left=e.clientX-obj.offsetLeft;
- var mouse_top=e.clientY-obj.offsetTop;
- var docmousemove=document.onmousemove;
- var docmouseup=document.onmouseup;
- document.onselectstart=function(e){return false}
- document.onmouseup=function(){
- document.onmousemove=docmousemove;
- document.onmouseup=docmouseup;
- document.onselectstart=function(e){return true}
- }
- document.onmousemove=function(ev){
- var ev=ev ? ev : event;
- if(ev.clientX-mouse_left>0&&document.documentElement.clientWidth-(ev.clientX-mouse_left)-obj.offsetWidth+document.documentElement.scrollLeft>0){
- obj.style.left=(ev.clientX-mouse_left)+"px";
- }
- if(ev.clientY-mouse_top>0&&document.documentElement.clientHeight-(ev.clientY-mouse_top)-obj.offsetHeight+document.documentElement.scrollTop>0){
- obj.style.top=(ev.clientY-mouse_top)+"px";
- }
- }
- }
- </script>
- </body>
- </html>
百度地图api实例练习
最新推荐文章于 2022-08-14 13:42:00 发布