詳解在Angular4中使用ng2-baidu-map的方法
一、引言
之前在Angular4使用過百度地圖,記錄一下踩過的坑
二、實現(xiàn)
1.安裝
npm install angular2-baidu-map
2.在app.module.ts配置
ak key在http://lbsyun.baidu.com/apiconsole/key中創(chuàng)建
import { BrowserModule } from '@angular/platform-browser' import { NgModule } from '@angular/core' import { AppComponent } from './app.component' import { BaiduMapModule } from 'angular2-baidu-map' @NgModule({ declarations: [AppComponent], imports: [BrowserModule, BaiduMapModule.forRoot({ ak: 'your ak' })], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
3.在app.component.html使用
<div style="height: 500px;width: 900px;" > <baidu-map [options]="opts" > <!--<marker [point]="point" [options]="markOpts" (loaded)="" (clicked)=""></marker>--> <marker *ngFor="let marker of markers" [point]="marker.point" [options]="marker.options"></marker> <!--導(dǎo)航控件--> <control type="navigation" [options]="controlOpts"></control> <!--地圖全景控件--> <control type="overviewmap" [options]="overviewmapOpts"></control> <!--比例尺--> <control type="scale" [options]="scaleOpts"></control> <!--地圖類型--> <control type="maptype" [options]="mapTypeOpts"></control> <control type="geolocation" [options]="geolocationOpts"></control> </baidu-map> </div>
4.在app.component.ts
import {Component, OnInit} from '@angular/core'; import { MapOptions, Point, MarkerOptions, NavigationControlOptions, ControlAnchor, NavigationControlType, OverviewMapControlOptions, ScaleControlOptions, MapTypeControlOptions, MapTypeControlType, GeolocationControlOptions } from 'angular2-baidu-map'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.sass'] }) export class AppComponent { public opts: MapOptions; public markers: Array<{ point: Point; options?: MarkerOptions }>; public controlOpts: NavigationControlOptions; public overviewmapOpts: OverviewMapControlOptions; public scaleOpts: ScaleControlOptions; public mapTypeOpts: MapTypeControlOptions; public geolocationOpts: GeolocationControlOptions; // 文字標(biāo)注 public text: string; public onMarkerLoad(marker: any) { const label = new window.BMap.Label('文字標(biāo)注‘, { offset: new window.BMap.Size(20, -12) }); label.setStyle({ border: '1px solid #d81e06', color: '#d81e06', fontSize: '10px', padding: '1px' }); marker.setLabel(label); } constructor() { this.opts = { centerAndZoom: { // 設(shè)置中心點和縮放級別 lng: 120.62, // 經(jīng)度 lat: 31.32, // 緯度 zoom: 15 // 縮放級別 }, minZoom: 3, // 最小縮放級別的地圖 maxZoom: 19, // 最大縮放級別的地圖 enableHighResolution: true, // 是否用高分辨率的地圖,default:true enableAutoResize: true, // 是否可以自動調(diào)整大小,default:true enableMapClick: true, // 地圖是否可以點擊,default:true disableDragging: false, // 是否禁用地圖拖動功能 enableScrollWheelZoom: true, // 是否啟用滾輪進行縮放功能 disableDoubleClickZoom: false, // 是否禁用雙擊縮放功能 enableKeyboard: true, // 是否啟用鍵盤移動地圖功能 enableInertialDragging: false, // 是否啟用慣性阻力函數(shù) enableContinuousZoom: true, // 是否啟用連續(xù)縮放功能 disablePinchToZoom: false, // 是否禁用縮放功能的縮放 cursor: '', // 設(shè)置默認(rèn)的光標(biāo)樣式,應(yīng)該遵循CSS規(guī)范 draggingCursor: '', // 設(shè)置默認(rèn)的拖動光標(biāo)樣式,應(yīng)該遵循CSS規(guī)范 currentCity: '蘇州市', // 設(shè)置當(dāng)前的城市 }; // 這是地圖標(biāo)記marker this.markers = [ { options: { icon: { imageUrl: '/assets/1.jpg', size: { height: 60, width: 50 } }, title: 'asdkjgaslfkjasd' }, point: { lng: 120.62, // 經(jīng)度 lat: 31.32, // 緯度 } }, { point: { lng: 120.63, // 經(jīng)度 lat: 31.32, // 緯度 } }, { point: { lng: 120.63, // 經(jīng)度 lat: 31.31, // 緯度 } } ]; // 這是控件control this.controlOpts = { // 導(dǎo)航控件 anchor: ControlAnchor.BMAP_ANCHOR_TOP_LEFT, // 顯示的控件的位置 type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE, // 用來描述它是什么樣的導(dǎo)航 offset: { // 控件的大小 width: 30, height: 30 }, showZoomInfo: true, // 是否展示當(dāng)前的信息 enableGeolocation: true // 是否啟用地理定位功能 }; this.overviewmapOpts = { // 地圖全景控件 anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT, // 顯示的控件的位置 isOpen: true }; this.scaleOpts = { // 比例尺控件 anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT }; this.mapTypeOpts = { // 地圖類型 type: MapTypeControlType.BMAP_MAPTYPE_CONTROL_HORIZONTAL }; // Geolocation 和Panorama 沒有屬性 } }
效果預(yù)覽
總結(jié)
以上所述是小編給大家介紹的詳解在Angular4中使用ng2-baidu-map的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
- 再談Angular4 臟值檢測(性能優(yōu)化)
- Angular4學(xué)習(xí)之Angular CLI的安裝與使用教程
- 淺談angular4實際項目搭建總結(jié)
- 深入理解Angular4訂閱(Subscribe)與取消
- Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法
- angular4中關(guān)于表單的校驗示例
- ionic3+Angular4實現(xiàn)接口請求及本地json文件讀取示例
- angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動畫的方法
- Angular4開發(fā)解決跨域問題詳解
- 詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
- 詳解Angular4 路由設(shè)置相關(guān)
相關(guān)文章
AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)問題及解決方案
這篇文章主要介紹了AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)的問題及解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼
這篇文章主要介紹了AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼的相關(guān)資料,需要的朋友可以參考下2016-01-01Angular應(yīng)用的多語言設(shè)置問題解決示例
這篇文章主要為大家介紹了Angular應(yīng)用的多語言設(shè)置問題解決示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解
作為一種大受歡迎的Web應(yīng)用程序框架,Angular終于迎來了版本4.0,下面這篇文章主要給大家介紹了關(guān)于Angular 4.0學(xué)習(xí)教程之架構(gòu)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09angularjs使用div模擬textarea文本框的方法
今天小編就為大家分享一篇angularjs使用div模擬textarea文本框的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10Angular項目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于Angular項目中$scope.$apply()方法使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來看看吧。2017-07-07