脚本宝典收集整理的这篇文章主要介绍了angular2-baidu-map网站中使用百度地图,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
效果图
1、安装
npm install Angular2-baidu-map --save
2、在主模块中注册 app.module.ts
import {BaiduMap} From "angular2-baidu-map";
组件中导入
declarations: [
BaiduMap
]
3、创建组件使用地图 baidu.component.ts
import {Component, OnInIT} from '@angular/core';
import {Offlineoptions, ControlAnchor, NavigationControlTyPE} from 'angular2-baidu-map';
@Component({
selector: 'map-PResentation',
templateUrl: "../templates/baidu.COMponent.htML",
styles: [`
baidu-map{
width: 100%;
height: 500px;
display: block;
}
`]
})
export class BaiduComponent implements OnInit {
opts:any;
offlineOpts:OfflineOptions;
ngOnInit() {
// 配置地图, 参考百度地图api
this.opts = {
// 地图中心坐标
center: {
longitude: 116.4177150000,
latitude: 40.0612540000
},
zoom: 17,
// 地图上的坐标
markers: [{
longitude: 116.4177150000,
latitude: 40.0612540000,
title: '华泰汽车集团',
content: '朝阳区立水桥',
autoDisplayInfoWindow: true
}],
geolocationCtrl: {
anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT
},
scaleCtrl: {
anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
},
overviewCtrl: {
isOpen: true
},
navCtrl: {
type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LargE
}
};
this.offlineOpts = {
retryInterval: 5000,
txt: '没有网络'
};
}
// 刚加载加载地图信息
loadMap(e:any) {
console.LOG(e);
}
// 单机地图坐标, 打印信息
clickMarker(marker:any) {
console.log(marker);
}
}
4、模板文件,注意,这里需要在百度地图api注册key
<baidu-map
ak="8azVgQbZR9irKHBOsqMzi8CAT7l1gtjt"
[options]="opts"
[offline]="offlineOpts"
(onMapLoaded)="loadMap($event)"
(onMarkerClicked)="clickMarker($event)"
></baidu-map>
以上是脚本宝典为你收集整理的angular2-baidu-map网站中使用百度地图全部内容,希望文章能够帮你解决angular2-baidu-map网站中使用百度地图所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。