详解在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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 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
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
actionscript与javascript的区别
2011/05/25 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
构建Python包的五个简单准则简介
2015/06/15 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
用python实现学生管理系统
2020/07/24 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
个人自我评价分享
2013/12/20 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
运动会加油稿20字
2014/11/15 职场文书
技术员个人工作总结
2015/03/03 职场文书
小学六年级毕业感言
2015/07/30 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle