百度地图api实例练习

最新推荐文章于 2021-06-06 23:20:05 发布

lihaiboas1

最新推荐文章于 2021-06-06 23:20:05 发布

阅读量1.6w

点赞数 2

分类专栏：前端前端脚本文章标签：百度 api function float xhtml javascript

本文链接：https://blog.csdn.net/lhb_blog/article/details/7599095

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

前端脚本

17 篇文章 0 订阅

订阅专栏

<!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 οnmοusedοwn="drag(this.parentNode,event)">百度地图<a href="javascript:" οnclick="document.getElementById('div').style.display='none'" class="close">×</a></h2>
<div class="mapheader"><input type="text" id="searchtext" /><input type="button" value="搜索" id="searchbt" οnclick="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.οnmοuseup=function(){
		document.οnmοusemοve=docmousemove;
		document.οnmοuseup=docmouseup;
		document.onselectstart=function(e){return true}
	}
	document.οnmοusemοve=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>

lihaiboas1

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
百度地图api实例练习

无标题文档#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;}
复制链接

扫一扫

专栏目录