第一次使用百度地图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);

最终的显示效果如下。

第一次使用百度地图API相关推荐

html5 geolocation 百度地图,html5 geolocation配合百度地图api实现定位
1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用 ...
百度地图API的第一次接触
因为项目的需求,第一次接触了百度API. 第一步:引用百度地图API的脚本如果在局域网环境中,要把地图文件和js文件都要下载下来 <script type="text/javascr ...
百度地图api，第一次定位成功，后面505错误
百度地图api,第一次定位成功,后面505错误 1.查看key对不对 2.查看AndroidManifest中放的位置对不对,是放在 <application里面与 <activity a ...
使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
百度地图API开发指南
百度地图API开发指南本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
百度地图API如何申请？（自认为比较详细，如解决了你的问题请收藏、点赞、关注！）
(请先看置顶博文)https://blog.csdn.net/GenuineMonster/article/details/104495419 注意:自己申请的AK要保存好,最好不要外借,避免不必要的 ...
地图上制作线路的动画_使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
项目一、调用百度地图api实现电子围栏和报警信息关联
前段时间香克斯去实习去了,由于一些原因只实习了12天,不过第一次实习,觉得还是有必要记录一下.事先声明,这个博客也是获得同意的,目前这个项目完成度还不是很高,有的地方我的想法不成熟的,希望大家多多提意 ...
react项目使用百度地图API
文章目录前言一.接入API 1.登录百度地图 2.创建应用,获取密钥 3.引入API 4.当作模块导入BMap 二.使用 1.引入 2.展示地图三.效果展示总结前言最近在开发一款react ...

第一次使用百度地图API

第一次使用百度地图API相关推荐

最新文章

热门文章