详解在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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
js中的json对象详细介绍
Oct 29 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
Vue.js组件高级特性实例详解
2018/12/24 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Django中信号signals的简单使用方法
2019/07/04 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
实习单位接收函
2014/01/11 职场文书
2014学年自我鉴定
2014/02/23 职场文书
电子工程求职信
2014/07/17 职场文书
建筑安全责任书范本
2014/07/24 职场文书
学前教育专业求职信
2014/09/02 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS