百度地图使用教程(Javascript版)

最新推荐文章于 2023-08-03 22:28:35 发布

rongwenbin

最新推荐文章于 2023-08-03 22:28:35 发布

阅读量713

点赞数 1

分类专栏： JS WEB

JS 同时被 2 个专栏收录

76 篇文章 0 订阅

订阅专栏

WEB

25 篇文章 1 订阅

订阅专栏

注意：非Android版

准备：

百度地图在线文档：http://developer.baidu.com/map/reference/

百度地图在线实例：http://developer.baidu.com/map/jsdemo.htm

1.百度地图实例化

需要在页面引入百度地图API。

Java代码

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

然后在Body添加一个Div，用于显示地图，Div大小可自定义。

Html代码

<div id="allmap" style="width: 1000px;height: 1000px;" ></div>

之后编写初始化代码。

Js代码

var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15); // 初始化地图，设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); //启用滚轮放大缩小

2.百度地图位置搜索

Js代码

var map = new BMap.Map("allmap"); //实例化百度地图
var address = "海淀区国家图书馆"; //详细地址
var lableName = "国家图书馆"; //建筑名称
var city = "北京"; //城市
var myGeo = new BMap.Geocoder(); //地址解析器
/**
* 根据地址获得位置坐标，然后实例化百度地图，
*/
myGeo.getPoint(address, function(point){
if(point){
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.centerAndZoom(point,15); //初始化地图，设置中心点坐标和地图级别。
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.OverviewMapControl()); //添加地图缩略图控件
//创建标注（类似定位小红旗）
var marker = new BMap.Marker(point);
//标注提示文本
var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)});
marker.setLabel(label); //添加提示文本
//创建消息框
var infoWindow = new BMap.InfoWindow(address);
//绑定标注单击事件，设置显示的消息框。
marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});
map.addOverlay(marker); //把标注添加到地图
}
}, city);

页面效果：

3.公交线路查询

Html代码

<html>
<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.4"></script>
<script type="text/javascript">
var map = null; //实例化百度地图
var address = "海淀区国家图书馆"; //详细地址
var lableName = "国家图书馆"; //建筑名称
var city = "北京"; //城市
var myGeo = new BMap.Geocoder(); //地址解析器
function initMap(){
/**
* 根据地址获得位置坐标，然后实例化百度地图
*/
myGeo.getPoint(address, function(point){
if(point){
map = new BMap.Map("allmap"); //实例化百度地图
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.centerAndZoom(point,15); //初始化地图，设置中心点坐标和地图级别。
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.OverviewMapControl()); //添加地图缩略图控件
//创建标注（类似定位小红旗）
var marker = new BMap.Marker(point);
//标注提示文本
var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)});
marker.setLabel(label); //添加提示文本
//创建消息框
var infoWindow = new BMap.InfoWindow(address);
//绑定标注单击事件，设置显示的消息框
marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});
map.addOverlay(marker); //把标注添加到地图
}
}, city);
}
//查询公交
function findPath(){
var b = document.getElementById("begin").value; //起始位置
var e = document.getElementById("end").value; //结束位置
//初始化公共公交查询系统
var transit = new BMap.TransitRoute(map,{
renderOptions:{
map:map,
panel:'panel'
}
});
transit.search(b,e); //查询
}
window.onload= initMap(); //初始化百度地图
</script>
</head>
<body>
<div id="allmap" style="width: 500px;height: 500px;" ></div><br>
<input id="begin" type="text" />到<input id="end" type="text" />   <input value="查询" onclick="findPath()" type="button" />
<br>
<div id="panel" ></div>
</body>
</html>

页面效果：

5.搜索附近信息

Html代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript">
var map = null; //实例化百度地图
var address = "海淀区国家图书馆"; //详细地址
var lableName = "国家图书馆"; //建筑名称
var city = "北京"; //城市
var myGeo = new BMap.Geocoder(); //地址解析器
function initMap(){
/**
* 根据地址获得位置坐标，然后实例化百度地图
*/
myGeo.getPoint(address, function(point){
if(point){
map = new BMap.Map("allmap"); //实例化百度地图
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.centerAndZoom(point,15); //初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.OverviewMapControl()); //添加地图缩略图控件
//创建标注（类似定位小红旗）
var marker = new BMap.Marker(point);
map.addOverlay(marker); //把标注添加到地图
initPanel(point); //调用搜索
}
}, city);
}
//右侧信息面板初始化
function initPanel(point){
//创建圆形范围
var circle = new BMap.Circle(point,1000,{
strokeWeight: 1 ,
fillOpacity: 0.3,
strokeOpacity: 0.3
});
map.addOverlay(circle); //显示到地图
//创建搜索范围，根据搜索关键词分类
var local = new BMap.LocalSearch(map, {renderOptions: {autoViewport: false},onSearchComplete:function(){
var res = local.getResults(); //返回值
var str = ""; //内容
var id = ""; //显示的位置
//根据查询关键词判断
if(res.keyword == "公交车"){
var busStopArr = new Array(); //车站数组
var busNameArr = new Array(); //公交车名称数组
id = "busList";
//把信息存储到数组
for(var i=0;i<res.getNumPois();i++){
var r = res.getPoi(i);
if(r == undefined){
break;
}else{
var arr = r.address.split(";");
busStopArr.push(r.title.replace(/[ ]/g,""));
for(var j=0;j<arr.length;j++){
busNameArr.push(arr[j].replace(/[ ]/g,""));
}
}
}
//去掉重复的车站信息
for(var i=0;i<busStopArr.length;i++){
for(var j=i+1;j<busStopArr.length;j++){
if(busStopArr[i] == busStopArr[j]){
busStopArr.splice(j,1);
j--;
}
}
}
//去掉重复的公交车名称
for(var i=0;i<busNameArr.length;i++){
for(var j=i+1;j<busNameArr.length;j++){
if(busNameArr[i] == busNameArr[j]){
busNameArr.splice(j,1);
j--;
}
}
}
//整理结果
strstr=str+"<li>公交站:";
for(var i=0;i<busStopArr.length;i++){
strstr=str+' '+busStopArr[i];
}
strstr=str+"</li>";
strstr=str+"<li>公交线路：";
for(var j=0;j<busNameArr.length;j++){
strstr=str+' '+busNameArr[j];
}
strstr=str+"</li>";
}
//查询地铁信息
if(res.keyword == "地铁"){
var arr = new Array();
id = "metroList";
for(var i=0;i<res.getNumPois();i++){
var r = res.getPoi(i);
if(r == undefined){
break;
}else{
//截取信息，存储到数组
if(r.title.substring(0,(r.title.indexOf('站')+1)) != ''){
arr.push({title:r.title.substring(0,(r.title.indexOf('站')+1)),mm:Math.round(map.getDistance(point,r.point))});
}
}
}
//去掉重复的地铁站信息
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i].title == arr[j].title){
arr.splice(j,1);
j--;
}
}
}
//整理结果
for(var k=0;k<arr.length;k++){
strstr=str+'<li><span class="gj_lx" >'+arr[k].title+" ";
strstr=str+'<span class="lan" > </span>';
strstr = str+'</span><span class="gj_m" >'+arr[k].mm+'米</span></li>';
}
}
document.getElementById(id).innerHTML = str;
}});
//获得搜索范围
var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
//开始搜索
local.searchInBounds("公交车",bounds);
local.searchInBounds("地铁",bounds);
}
//封装好处理圆形范围的算法
function getSquareBounds(centerPoi,r){
var a = Math.sqrt(2) * r;
var getMecator = map.getMapType().getProjection().lngLatToPoint;
var getPoi = map.getMapType().getProjection().pointToLngLat;
mPoi = getMecator(centerPoi);
var x0 = mPoi.x, y0 = mPoi.y;
var x1 = x0 + a / 2 , y1 = y0 + a / 2;
var x2 = x0 - a / 2 , y2 = y0 - a / 2;
var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
return new BMap.Bounds(sw, ne);
}
window.onload= initMap(); //初始化百度地图
</script>
</head>
<body style="float: left;margin-left: 10px;" >
<div id="allmap" style="width: 500px;height: 500px;" ></div>
<h3>公交车</h3>
<ul id="busList" ></ul><br>
<h3>地铁</h3>
<ul id="metroList" ></ul>
</body>
</html>

结果：

rongwenbin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图使用教程(Javascript版)

准备：百度地图在线文档：http://developer.baidu.com/map/reference/百度地图在线实例：http://developer.baidu.com/map/jsdemo.htm1.百度地图实例化需要在页面引入百度地图API Java代码 "text/javascript" src="http:/
复制链接

扫一扫