欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年06月19日 09:08:44   作者:茶煙歌緒  
這篇文章主要介紹了在Angular4中使用ng2-baidu-map的方法,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下

一、引言

之前在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)載,煩請注明出處,謝謝!

相關(guān)文章

  • AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)問題及解決方案

    AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)問題及解決方案

    這篇文章主要介紹了AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)的問題及解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-08-08
  • angular 實現(xiàn)同步驗證器跨字段驗證的方法

    angular 實現(xiàn)同步驗證器跨字段驗證的方法

    幾乎每個web應(yīng)用都會用到表單,那么驗證器就是必不可少的東西,這篇文章主要介紹了angular 實現(xiàn)同步驗證器跨字段驗證的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-04-04
  • 詳解angular2.x創(chuàng)建項目入門指令

    詳解angular2.x創(chuàng)建項目入門指令

    這篇文章主要介紹了詳解angular2.x創(chuàng)建項目入門指令,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼

    AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼

    這篇文章主要介紹了AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼的相關(guān)資料,需要的朋友可以參考下
    2016-01-01
  • Angular應(yīng)用的多語言設(shè)置問題解決示例

    Angular應(yīng)用的多語言設(shè)置問題解決示例

    這篇文章主要為大家介紹了Angular應(yīng)用的多語言設(shè)置問題解決示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • AngularJs ng-route路由詳解及實例代碼

    AngularJs ng-route路由詳解及實例代碼

    這篇文章主要介紹了AngularJs ng-route路由,這里整理相關(guān)資料及簡單實例代碼,有興趣的小伙伴可以參考下
    2016-09-09
  • AngularJS入門教程之AngularJS模型

    AngularJS入門教程之AngularJS模型

    這篇文章主要介紹了AngularJS入門教程之AngularJS模型的相關(guān)資料,需要的朋友可以參考下
    2016-04-04
  • Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解

    Angular 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-09
  • angularjs使用div模擬textarea文本框的方法

    angularjs使用div模擬textarea文本框的方法

    今天小編就為大家分享一篇angularjs使用div模擬textarea文本框的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • Angular項目中$scope.$apply()方法的使用詳解

    Angular項目中$scope.$apply()方法的使用詳解

    這篇文章主要給大家介紹了關(guān)于Angular項目中$scope.$apply()方法使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來看看吧。
    2017-07-07

最新評論