本篇文章给大家分享的是有关ng2-baidu-map怎么在Angular4中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:主机域名、网络空间、营销软件、网站建设、前进网站维护、网站推广。
1.安装
npm install angular2-baidu-map
2.在app.module.ts配置
ak key在http://lbsyun.baidu.com/apiconsole/key中创建
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 > <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> <!--导航控件--> <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; // 文字标注 public text: string; public onMarkerLoad(marker: any) { const label = new window.BMap.Label('文字标注‘, { 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: { // 设置中心点和缩放级别 lng: 120.62, // 经度 lat: 31.32, // 纬度 zoom: 15 // 缩放级别 }, minZoom: 3, // 最小缩放级别的地图 maxZoom: 19, // 最大缩放级别的地图 enableHighResolution: true, // 是否用高分辨率的地图,default:true enableAutoResize: true, // 是否可以自动调整大小,default:true enableMapClick: true, // 地图是否可以点击,default:true disableDragging: false, // 是否禁用地图拖动功能 enableScrollWheelZoom: true, // 是否启用滚轮进行缩放功能 disableDoubleClickZoom: false, // 是否禁用双击缩放功能 enableKeyboard: true, // 是否启用键盘移动地图功能 enableInertialDragging: false, // 是否启用惯性阻力函数 enableContinuousZoom: true, // 是否启用连续缩放功能 disablePinchToZoom: false, // 是否禁用缩放功能的缩放 cursor: '', // 设置默认的光标样式,应该遵循CSS规范 draggingCursor: '', // 设置默认的拖动光标样式,应该遵循CSS规范 currentCity: '苏州市', // 设置当前的城市 }; // 这是地图标记marker this.markers = [ { options: { icon: { imageUrl: '/assets/1.jpg', size: { height: 60, width: 50 } }, title: 'asdkjgaslfkjasd' }, point: { lng: 120.62, // 经度 lat: 31.32, // 纬度 } }, { point: { lng: 120.63, // 经度 lat: 31.32, // 纬度 } }, { point: { lng: 120.63, // 经度 lat: 31.31, // 纬度 } } ]; // 这是控件control this.controlOpts = { // 导航控件 anchor: ControlAnchor.BMAP_ANCHOR_TOP_LEFT, // 显示的控件的位置 type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE, // 用来描述它是什么样的导航 offset: { // 控件的大小 width: 30, height: 30 }, showZoomInfo: true, // 是否展示当前的信息 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 没有属性 } }
以上就是ng2-baidu-map怎么在Angular4中使用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
本文名称:ng2-baidu-map怎么在Angular4中使用
分享路径:https://www.cdcxhl.com/article12/peicgc.html
成都网站建设公司_创新互联,为您提供网站营销、域名注册、建站公司、企业网站制作、网站收录、品牌网站制作
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联