国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

詳解在Angular4中使用ng2-baidu-map的方法

2019-11-19 11:18:52
字體:
供稿:網(wǎng)友

一、引言

之前在Angular4使用過百度地圖,記錄一下踩過的坑

二、實(shí)現(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è)置中心點(diǎn)和縮放級(jí)別    lng: 120.62,  // 經(jīng)度    lat: 31.32,  // 緯度    zoom: 15      // 縮放級(jí)別   },   minZoom: 3, // 最小縮放級(jí)別的地圖   maxZoom: 19, // 最大縮放級(jí)別的地圖   enableHighResolution: true, // 是否用高分辨率的地圖,default:true   enableAutoResize: true, // 是否可以自動(dòng)調(diào)整大小,default:true   enableMapClick: true, // 地圖是否可以點(diǎn)擊,default:true   disableDragging: false, // 是否禁用地圖拖動(dòng)功能   enableScrollWheelZoom: true, // 是否啟用滾輪進(jìn)行縮放功能   disableDoubleClickZoom: false, // 是否禁用雙擊縮放功能   enableKeyboard: true, // 是否啟用鍵盤移動(dòng)地圖功能   enableInertialDragging: false,   // 是否啟用慣性阻力函數(shù)   enableContinuousZoom: true, // 是否啟用連續(xù)縮放功能   disablePinchToZoom: false,  // 是否禁用縮放功能的縮放   cursor: '',     // 設(shè)置默認(rèn)的光標(biāo)樣式,應(yīng)該遵循CSS規(guī)范   draggingCursor: '', // 設(shè)置默認(rèn)的拖動(dòng)光標(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的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 隆德县| 鄯善县| 仙游县| 六安市| 托里县| 梧州市| 喀什市| 高碑店市| 天门市| 陇川县| 旅游| 隆尧县| 财经| 凤台县| 北川| 洮南市| 洪雅县| 大竹县| 恭城| 板桥市| 金塔县| 眉山市| 准格尔旗| 花莲市| 和龙市| 焉耆| 长沙市| 宁波市| 普安县| 巨鹿县| 汾西县| 临湘市| 陵水| 陇西县| 江北区| 汝阳县| 沽源县| 筠连县| 陇南市| 融水| 正镶白旗|