前言
本次学习主要使用的是百度地图的JavascriptAPI用于前端项目，在浏览器中打开网页demo测试实现各个效果
一、注册 申请
使用百度地图前，需要先在百度地图开放平台注册，然后在控制台申请一个atk,本次因为是学习使用，所以申请的密钥用于浏览器端，如下图
二、 载入API
通过script标签载入百度地图API,类似于在线载入其他JS插件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
第一章 基本使用
百度地图使用和许多JS插件一样，通过id对div进行覆盖，可以设置div所处的位置，css样式来选择地图的呈现样式
//基本使用css样式
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{
margin:auto;
height:500px;
width:700px;
}
//页面div
<div id="container"></div>
创建地图，调用百度地图API的函数，生成一个地图实例对象
var map = new BMapGL.Map("container"); //创建地图实例
初始化地图时需要提供地图中心点坐标，可以写城市名（如’北京’) ,也可以写经纬度坐标，官方文档特别说明了，在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。
var point = new BMapGL.Point(116.331398,39.897445); //设置地图中心点坐标
有了地图实例和坐标，还需要初始化
map.centerAndZoom(point, 15); //初始化地图，15为展示级别
只要上述代码，就可以在页面呈现一个基本的地图了，如果你想要给地图添加设置，如支持鼠标滚轮缩放，添加官方提供的地图控件等，可以查阅官方文档，添加对应的函数，
第二章 地图元素
地图元素主要通过两个方法来设置地图元素的显示隐藏
// map.setOptions({displayOptions: yourDisplayOptions})
// map.setDisplayOptions(yourDisplayOptions)
所以，当你想要对地图上的图标，文字说明，亦或是3d建筑物的显示隐藏有需求时，可以通过触发函数里调用上述两种方法之一来达成目的。
官网例子提供了示例，通过按钮触发函数，写法如下。
//script部分
//本次demo使用第二种，可以直接设置poi属性
//设置地图显示元素
map.setDisplayOptions({
poi: true //初始化设置显示POI信息
})
function showText() {
map.setDisplayOptions({
poiText: true //显示POI
})
}
function hideText() {
map.setDisplayOptions({
poiText: false //关闭POI
})
}
function showIcon() {
map.setDisplayOptions({
poiIcon: true //显示图标
})
}
function hideIcon() {
map.setDisplayOptions({
poiIcon: false //关闭图标
})
}
function show3Dbuild() {
map.setDisplayOptions({
building: true
})
}
function hide3Dbuild() {
map.setDisplayOptions({
building: false
})
}
//html部分
<ul class="btn-wrap" style="z-index: 99;">
<!-- poi Point of Interest 直译兴趣点，在地理系统中可以理解为地标信息点 -->
<li class = "btn" onclick = "showText()">显示POI文字</li>
<li class = "btn" onclick = "hideText()">隐藏POI文字</li>
<li class = "btn" onclick = "showIcon()">显示POI的图标</li>
<li class = "btn" onclick = "hideIcon()">隐藏POI的图标</li>
<li class = "btn" onclick = "show3Dbuild()">显示3D建筑物</li>
<li class = "btn" onclick = "hide3Dbuild()">隐藏3D建筑物</li>
</ul>
第三章路线规划
第一步，获取坐标
坐标的获取有两种，你可以在百度地图的JS文档里看到地址解析，通过地址解析获取坐标，地址必须精确到街道，但是在大多数使用场景里，应该支持用户模糊搜索的，地址解析对地址的要求严苛，所以获取坐标可以采用另一种方式：localSearch本地检索，想要找到详细的对该方法的描述，在JS文档中找到类参考并点击，在类参考的视角动画内往下翻，即可找到localSearch，点击可以看到详细描述。以下是我在制作demo时创建的local实例。
var local = new BMapGL.LocalSearch(map, {
renderOptions:{map: map}, //结果呈现位置
pageCapacity: 1, //显示1个检索结果
localResult:{city:'xx市'} //限制检索的城市
});
因为一次要检索两个地址的坐标，所以要将得到的俩个地址放在数组里传参，调用方法如下：
local.search([beginPos,endPos]); //搜索起点，终点
在搜索完毕后的回调函数setSearchCompleteCallback里，可以对地址检索的结果进行操作，在这一步就可以通过searchResult获取地址检索到的起始点坐标，怎么存放这俩个坐标点有多种方法，这里我使用的csdn上一个大佬做两点距离折线时的方法，设置一个数组，将两个坐标依次存入数组
local.setSearchCompleteCallback((searchResult)=>{
var pois = new Array(); //存储poi
for(var i=0;i<=1;i++){
//获取搜索结果
var poi = searchResult[i].getPoi(0);
//存储点
pois.push(poi.point);
//设置放大级别15，范围1-20
map.centerAndZoom(poi.point,15);
}
....
})
这时数组pois[0]就是起点坐标，pois[1]就是终点坐标，之后就可以利用这俩个坐标去做你想要的路线规划了
路线规划-驾车路线规划
驾车路线规划使用 BMapGL.DrivingRoute方法，因为需要做避免拥堵的案例，查找了类参考关于该方法的说明，找到了方案配置项，如下图
官方没有给调用的例子，但是在公交方案的例子中，有类似的写法可以参考，以下是我的代码：
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{
margin:auto;
height:500px;
width:700px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<!-- 在线载入百度地图API -->
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
</script>
<body>
输入您的起点：<input type="text" name="beginPos">
输入您的终点：<input type="text" name="endPos">
<input type="button" name="getPoint" value="点我获取路线">
<select name="select_type" id="select_type">
<option selected hidden disabled value="">选择出行方案</option>
<option value="0">默认方案</option>
<option value="1">避免拥堵</option>
</select>
<p id="result">路程</p>
<p id="time">时间</p>
<hr>
<div id="container"></div>
<script>
var map = new BMapGL.Map("container"); //创建地图实例
map.centerAndZoom('城市名', 17); //初始化地图，17为展示级别，直接以城市为中心点坐标
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
$("input[name='getPoint']").bind('click',function(){ //点击按钮
var beginPos=$("input[name='beginPos']").val();
var endPos=$("input[name='endPos']").val();
var local = new BMapGL.LocalSearch(map, {
renderOptions:{map: map},
pageCapacity: 1, //显示1个检索结果
localResult:{city:'城市名'} //限制检索的城市
});
var selectedF = $("#select_type option:selected").val();
if(beginPos!='' && endPos!='' && selectedF!=''){ //输入不为空
local.search([beginPos,endPos]); //搜索起点，终点
local.setSearchCompleteCallback((searchResult)=>{ //搜索后的回调函数
var pois = new Array(); //存储poi
for(var i=0;i<=1;i++){
//获取搜索结果
var poi = searchResult[i].getPoi(0);
//存储点
pois.push(poi.point);
//设置放大级别15，范围1-20
map.centerAndZoom(poi.point,15);
}
var output1,output2;
var searchComplete = function (results){
if (transit.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
var plan = results.getPlan(0);
output1= plan.getDuration(true); //获取时间
output2= plan.getDistance(true); //获取距离
}
var routePolicy = [BMAP_DRIVING_POLICY_DEFAULT,BMAP_DRIVING_POLICY_AVOID_CONGESTION];
var transit = new BMapGL.DrivingRoute(map, {renderOptions: {map: map},
policy:0,
onSearchComplete: searchComplete,
onPolylinesSet: function(){
setTimeout(function(){
document.getElementById("result").innerHTML = `总路程为${output2}`; //页面元素重新赋值
document.getElementById("time").innerHTML = `预计时间为${output1}`; //页面元素重新赋值
});
}});
map.clearOverlays();
transit.search(pois[0],pois[1],routePolicy[selectedF]); //通过坐标确定路线
});
}else{
alert('请填写完整')
}
}); //绑定点击事件
</script>
</body>
调用时控制台没有报错，不过默认和避免拥堵的路线显示是一样的，可能官方默认和避免拥堵的路线整合了，不知道具体原因，控制台没报错路线能显示就当成功了吧。
路线规划-公交规划
公交规划在官方提供的示例demo里有一个结果面板共用户使用，因为公交有多种线路，不同线路公交的路线自然不同，所以提供了结果面板供用户使用，点击每条公交线可以查看到具体的线路，和驾车规划一样，可以在生成实例时配置方案。关于公交结果面板相关的代码如下：
//html页面设置结果面板呈现的位置
<p id="result"></p>
//js代码
var transit = new BMapGL.TransitRoute(map, {
renderOptions: {map: map, panel: 'result'}, //结果映射
policy: 0,
});
search(pois[0],pois[1],routePolicy[selectedF]);
function search(start,end,route){
transit.setPolicy(route); //选项设置
transit.search(start,end); //起始坐标查询
}
路线规划-步行规划
步行规划的方法不需要坐标点提供，我猜想也是套用了本地搜索，用户在输入起始地址后，选择坐标点，将得到步行导航路线，同样有结果面板供用户使用，代码如下：
var walking = new BMapGL.WalkingRoute(map, {
renderOptions: {map: map, panel: "result", autoViewport: true}
}); //创建步行规划实例walking , result为返回面板显示区的id
walking.search(beginPos,endPos);
地铁路线
地铁图和之前的地图生成不一样，参照官方例子写的代码如下，因为我想要用户输入站点后再显示路线，所以地铁图初始化了两次，代码有些冗余，但是能跑，以后有机会再考虑优化：
<body>
输入您的起点：<input type="text" name="beginPos">
输入您的终点：<input type="text" name="endPos">
<input type="button" name="getPoint" value="点我查看路线">
<hr>
<div id="container"></div>
<hr>
<script>
var subwayCityName = '武汉';
var list = BMapSub.SubwayCitiesList;
var subwaycity = null;
for (var i = 0; i < list.length; i++) {
if (list[i].name === subwayCityName) {
subwaycity = list[i];
break;
}
};
//初始化地图
var subway = new BMapSub.Subway('container', subwaycity.citycode);
subway.setZoom(0.5);
var zoomControl = new BMapSub.ZoomControl({
anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
offset: new BMapSub.Size(10,100)
});
subway.addControl(zoomControl);
$("input[name='getPoint']").bind('click',function(){ //点击按钮
var beginPos=$("input[name='beginPos']").val();
var endPos=$("input[name='endPos']").val();
if(beginPos!='' && endPos!=''){ //输入不为空
// 获取武汉地铁数据-初始化地铁图
var subway = new BMapSub.Subway('container', subwaycity.citycode);
var zoomControl = new BMapSub.ZoomControl({
anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,
offset: new BMapSub.Size(10,100)
});
subway.addControl(zoomControl);
subway.addEventListener('subwayloaded', function() {
var drct = new BMapSub.Direction(subway);
drct.search(beginPos,endPos);
});
}else{
alert('请填写完整')
}
}); //绑定点击事件
</script>
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
