第一次使用百度地图API

时间 2021-01-19 标签百度地图API

最近在项目中在添加客户功能时需要实现对客户地址进行地图选址的功能，包括添加页面的选址以及编辑页面的地址定位。现将第一次使用的心得记录下来。首先搜索百度地图的官网“http://lbsyun.baidu.com/”。找到“开发文档——web开发——JavaScript ApI”。在API文档中有详细的开发步骤和相关的Demo。

第一步：申请百度账号和ak。应用名称可以自己随便取一个名字，只要符合其命名规范即可。应用类型需要选择浏览器端。由于是本地自己使用，我就将白名单设为*。点击提交去激活。激活成功后就会获得相关的ak。

第二步：将javaScript文件引入到我们的页面当中来。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

第三步：创建地图容器元素。地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<div id="container"></div>

第四步：位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

var map = new BMap.Map("BDMap",{enableMapClick: false});

注意：

1.在调用此构造函数时应确保容器元素已经添加到地图上。

2.命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

3.第一个参数“BDMap”表示在id为BDMap的容器内添加一个地图。第二个参数主要为了防止选址时出现相关公交线路信息。如下所示。

第五步：设置地图中心点

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

var point = new BMap.Point(116.404, 39.915);

请注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法！！！

第六步：地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

map.centerAndZoom(point, 15);

注意：这里的point也可以使用String来代替，例如“北京”，这样的话zoom就会根据center自动调整。

以上就可以绘制出一副基本的地图了。

下面贴上在项目的相关javaScript代码。

// 百度地图API功能
// 绘制地图
var map = new BMap.Map("BDMap",{enableMapClick: false});
// 定位并显示当前地址
theLocation();
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_SMALL}); //左上角，添加默认缩放平移控件
map.addControl(top_left_control);
map.addControl(top_left_navigation);
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "address"
,"location" : map
});
var c=document.getElementById("address").value;
ac.setInputValue(c);
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function G(id) {
return document.getElementById(id);
}
function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
$("#longitude").val(pp.lng);//设置经纬度
$("#latitude").val(pp.lat);
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
// 用经纬度设置地图中心点
function theLocation(){
if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.centerAndZoom(new_point, 15);
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}else{
map.centerAndZoom("无锡", 15);
}
}
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
var pt = e.point;
geoc.getLocation(pt, function(rs){
//addressComponents对象可以获取到详细的地址信息
var addComp = rs.addressComponents;
var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
//将对应的HTML元素设置值
$("#address").val(site);
$("#longitude").val(pt.lng);
$("#latitude").val(pt.lat);
});
});

在项目中遇到的最大的问题就是，当保存了客户的相关地址信息之后。再次编辑时，用户在地图中的选址点和地址信息会一闪而过，变成初始化的状态。解决方法时再次编辑时

1.获取之前的经纬度进行地图中的标注创建（也就是那个红点）

var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.centerAndZoom(new_point, 15);
map.addOverlay(marker); // 将标注添加到地图中

2.设置地图中心点为选中的地址

map.panTo(new_point);

3.将地址值设置再次设置到input框中，否则地址为空。

var c=document.getElementById("address").value;
ac.setInputValue(c);

最终的显示效果如下。