ionic3 百度地图展示

index.html

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gYgULa1jV7bufpSpfcDjeIxBrEWmhmhy"></script>

html

<div#mapcon id="map_container"></div><!-- 地图  -->

css

body,#mapContainer{
margin:0;
height:0px;
width:100%;
font-size:12px;
}

ts

@ViewChild('mapcon') map_container: ElementRef;
// 展示百度地图
map: any;//地图对象
marker: any;//标记
baidu() {
this.longitude = '120.216022';
this.latitude = '30.128993';
this.addressName = '爱钓鱼位置';

let map = this.map = new BMap.Map(this.map_container.nativeElement, { enableMapClick: true });//创建地图实例
let point = new BMap.Point(this.longitude, this.latitude);//坐标可以通过百度地图坐标拾取器获取
map.centerAndZoom(point,14);//设置中心和地图显示级别
map.addControl(new BMap.MapTypeControl());
// map.setCurrentCity("广州");
let sizeMap = new BMap.Size(10, 80);//显示位置
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(false);//启动滚轮放大缩小，默认禁用
map.enableContinuousZoom(true);//连续缩放效果，默认禁用
map.disableDragging(true);     //禁止拖拽
map.clearOverlays();
let myIcon = new BMap.Icon("assets/img/icon/map.png",new BMap.Size(16,31));
let marker = this.marker = new BMap.Marker(point,{icon:myIcon});
map.addOverlay(marker);
}