详解在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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
Node.js Buffer用法解读
May 18 Javascript
JS实现520 表白简单代码
May 21 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
了解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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
用PHP实现验证码功能
2006/10/09 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
fgetcvs在linux的问题
2012/01/15 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
PHP时间和日期函数详解
2015/05/08 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python字符串格式化输出代码实例
2019/11/22 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
《自然之道》教学反思
2014/02/11 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
表扬稿格式范文
2015/01/16 职场文书
2015教师年度考核评语
2015/03/25 职场文书
成事在人观后感
2015/06/16 职场文书
2015年教师节感言
2015/08/03 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
Python字典的基础操作
2021/11/01 Python