申请百度地图服务

  • 注册登录百度账号
  • 申请成为百度开发者
  • 创建对应应用
  • 获取服务密钥（AK）

添加百度地图

js引用百度地图API文件

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

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

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

创建地图

1
2
3
4
5
6
7
8
9
10
11
this.map = new this.BMap.Map('MapBox') // 创建Map实例

let mpoint = this.point || new this.BMap.Point(116.404, 39.915) // 提前设定中心点或默认中心点

this.map.centerAndZoom(mpoint, 17) // 初始化放大级别

this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

this.map.enableDragging() //后开启拖拽

this.map.addControl(new BMap.NavigationControl()) //添加平移缩放控件

定位

浏览器定位

1
2
3
4
5
6
7
8
9
10
11
12
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert('城市:' + r.address.city + ';经纬度：'+r.point.lng+','+r.point.lat);
    }
    else {
        alert('错误'+this.getStatus());
    }        
});

地址获取经纬（搜索）

知道地址，分析查找经纬度点，这个做搜索比较多

1
2
3
4
5
6
7
8
9
// 创建地址解析器实例     
var myGeo = new BMap.Geocoder();      
// 将地址解析结果显示在地图上，并调整地图视野    
myGeo.getPoint("杭州市余杭区未来科技城", function(point){      
    if (point) {      
        map.centerAndZoom(point, 16);      
        map.addOverlay(new BMap.Marker(point));      
    }      
 }, "杭州市");

注：简单地图检索中：

1
2
3
4
let local = new this.BMap.LocalSearch(this.map, {
    renderOptions: { map: this.map }
})
    local.searchInBounds(this.value, this.map.getBounds()) //可以定位的更近

经纬度获取地址

知道经纬度点，分析查找点对应的具体位置名称，这个做设置收货地址等

1
2
3
4
5
6
7
8
9
10
11
// point参数可以是鼠标点击地图获取
new this.BMap.Geocoder().getLocation(point, (rs: any) => {
   // addressComponents对象可以获取到详细的地址信息
   var addComp = rs.addressComponents
   var site = addComp.province + ', ' 
              + addComp.city + ', '
              + addComp.district + ', ' 
              + addComp.street + ', ' 
              + addComp.streetNumber;
   console.log(rs.address) // 详细地址
})

自定义覆盖物

地图自定义覆盖物伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 定义自定义覆盖物的构造函数
function SquareOverlay (center, width, height, color, text) {
  this._center = center
  this._width = width
  this._height = height
  this._color = color
  this._text = text
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new window.BMap.Overlay()

// 实现初始化方法
SquareOverlay.prototype.initialize = function (map) {
  // 保存map对象实例
  this._map = map
  // 创建div元素，作为自定义覆盖物的容器
  var div = document.createElement('div')
  div.className = 'mapJoin-item'
  // 可以根据参数设置元素外观
  div.style.width = this._width + 'px'
  div.style.height = this._height + 'px'
  div.style.background = this._color
  div.innerText = this._text
  // 将div添加到覆盖物容器中
  map.getPanes().floatPane.appendChild(div)
  // 保存div实例
  this._div = div
  // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
  // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
  return div
}

// 实现绘制方法
SquareOverlay.prototype.draw = function () {
  // 根据地理坐标转换为像素坐标，并设置给容器
  var position = this._map.pointToOverlayPixel(this._center)
  this._div.style.left = position.x - this._width / 2 + 'px'
  this._div.style.top = position.y - this._height + 'px'
}

使用

1
2
3
4
5
6
7
8
// 创建自定义覆盖物
var mySquare = new SquareOverlay(new this.BMap.Point(pointX, pointY), 110, 40, '#7678f2', '文字')
// 添加到地图上
this.map.addOverlay(mySquare)
// 监听Click方法
mySquare._div.addEventListener('click', (e: any) => {
    ...
})

移动端点击事件和拖拽冲突问题

在移动端情况下，点击事件会和拖拽发生冲突，

即地图开启拖动，将无法监听点击（Click）事件，关闭地图拖到，那有些功能交互就不好。

本以为是移动端touchend的问题，但其实用touchend事件也无法解决该问题

查阅资料后，发现：手机端的拖动事件覆盖掉点击事件

我们可以试着这样

拖动一开始（触摸）则开启地图拖动；拖动结束（触摸结束）则关闭地图拖动。

这样在其他情况下，地图处于非拖动状态，则可以监听到点击事件

1
2
3
4
5
6
7
8
9
// 触摸移动--开启地图拖动
map.addEventListener("touchmove", function (e) {
   map.enableDragging();
});
    
// 触摸结束--禁止地图拖动
map.addEventListener("touchend", function (e) {
   map.disableDragging();
});

注：地图初始化时应当禁止地图拖动

百度地图Logo隐藏

是不是发现左下角有个百度地图logo

想去除没别的方法，直接CSS手动隐藏

1
2
3
4
// CSS代码
.anchorBL a {
    display: none;
}