ionic3 百度地图的使用

1、 在百度地图上申请AK;
申请地址

http://lbsyun.baidu.com/apiconsole/key

2、在index.html中（在jQuery cdn之后）引入，如下；

<script src="assets/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>

3、在具体的页面

declare let BMap;

4、在HTML中使用

<div class="map">
	<div class="align-bottom"  id="map-container"></div>
</div>

5、初始化百度地图

map:any;

loadMap() {
	this.map = new BMap.Map("map-container");
	if (this.order || this.refundOrder)
		this.odPoint = {
			lng: this.order ? this.order.lng : this.refundOrder.lng,
			lat: this.order ? this.order.lat : this.refundOrder.lat
		}

	console.log(this.odPoint);
	let point = new BMap.Point(this.odPoint.lng, this.odPoint.lat);
	this.map.centerAndZoom(point, 14);

	this.map.enableScrollWheelZoom(true);
	this.myGeo = new BMap.Geocoder();

	let geolocation = new BMap.GeolocationControl({
		locationIcon: new BMap.Icon("http://api.map.baidu.com/img/markers.png",
    	new BMap.Size(40, 25), {
			offset: new BMap.Size(5, 10),
			imageOffset: new BMap.Size(20, -237)
		})
	});
	this.map.addControl(geolocation);
	this.getLocation(point);

	this.addMarker(point);
}

6、添加标记点；

addMarker(point) {
	let marker = new BMap.Marker(point, {
		icon: new BMap.Icon("http://api.map.baidu.com/img/markers.png",
			new BMap.Size(40, 25), {
				offset: new BMap.Size(5, 10),
				imageOffset: new BMap.Size(20, -262)
			})
	});

	this.map.panTo(point);
	marker.setPosition(point);

	this.map.addOverlay(marker);
}

7、获取当前位置；

//获取配送员当前位置；
getLocation(p1) {
	let geolocation = new BMap.Geolocation();

	geolocation.getCurrentPosition((Gr) => {
		if (Gr) {
    		let p2 = new BMap.Point(Gr.point);

			console.log(p2);
		} else
			this.alertCtrl.create({ message: "定位失败，请确认是否打开定位" }).present();

	}, { enableHighAccuracy: true })
}