ionic3——引入百度地图api和一些操作

1、进入官网：http://lbsyun.baidu.com/

image.png
这里申请JavaScript API。
申请密钥：
image.png
创建应用：
image.png
这样得到ak，
image.png
2、引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
在需要的页面ts文件中引入：declare var BMap:any;
初始化一些配置：
html:
<div #mapcon id="map_container"></div>

import { Component,ViewChild,ElementRef } from '@angular/core';
@ViewChild('mapcon') map_container: ElementRef;

//初始化地图
    this.baiduMap = new BMap.Map(this.map_container.nativeElement, { enableMapClick: true });//创建地图
实例
    //初始经纬度 116.404269,39.913828
    let point = new BMap.Point(116.404269,39.913828);
    //一些配置
    this.baiduMap.centerAndZoom(point,11);//设置中心和地图显示级别
     this.baiduMap.addControl(new BMap.MapTypeControl());
    this.baiduMap.addControl(new BMap.NavigationControl());
    this.baiduMap.enableScrollWheelZoom(false);//启动滚轮放大缩小，默认禁用
    this.baiduMap.enableContinuousZoom(true);//连续缩放效果，默认禁用
    // map.disableDragging(true);     //禁止拖拽
    // this.baiduMap.clearOverlays();

3、一些常用操作：
画线：

//三个点的数据
var obj = {"center":[116.423033,39.50875],"end":[116.44886977641221,39.54564874073374],"start":[116.46790663504918,39.504824065642],"angle":60.00000000000001};
var json = {weight:2,color:"red",opacity:1};
    var arr = [];
    arr.push(new BMap.Point(obj.start[0],obj.start[1]));
    arr.push(new BMap.Point(obj.center[0],obj.center[1]));
    arr.push(new BMap.Point(obj.end[0],obj.end[1]));
    arr.push(new BMap.Point(obj.start[0],obj.start[1]));
    var line = new BMap.Polyline(arr,{strokeWeight:json.weight,strokeColor:json.color,strokeOpacity:json.opacity});
    this.baiduMap.addOverlay(line);

标注，移动：

var myIcon = new BMap.Icon("http://api0.map.bdimg.com/images/stop_icon.png", new BMap.Size(11,11));
var marker = new BMap.Marker(new BMap.Point(obj.start[0],obj.start[1]),{icon:myIcon});  // 创建标注
marker.enableDragging();//允许移动
marker.addEventListener("dragend", ()=>{
      var p = marker.getPosition();
          console.log("marker的位置是" + p.lng + "," + p.lat);
          //禁止移动
          marker.disableDragging();
      });
this.baiduMap.addOverlay(marker);     

移除特定标注或者线：额。。。