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


Posted in Javascript onJune 19, 2019

一、引言

之前在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 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>
  <!--导航控件-->
  <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 没有属性
 }
}

效果预览

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

总结

以上所述是小编给大家介绍的详解在Angular4中使用ng2-baidu-map的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 内存回收机制理解
Jan 17 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
个人小程序接入支付解决方案
May 23 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
了解Javascript中函数作为对象的魅力
Jun 19 #Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 #Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 #jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 #jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 #jQuery
You might like
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
js 数组详细操作方法及解析合集
2018/06/01 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Python3实现zip分卷压缩过程解析
2019/10/09 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
如何写你的创业计划书
2014/01/07 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
投资建议书模板
2014/05/12 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
医者仁心观后感
2015/06/17 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS