欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 18:42:53
一、引言 之前在angular4使用过百度地图,记录一下踩过的坑 二、实现 1.安装 npm install angular2-baidu-map 2.在app....

一、引言

之前在angular4使用过百度地图,记录一下踩过的坑

二、实现

1.安装

npm install angular2-baidu-map

2.在app.module.ts配置

ak 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的方法,希望对大家有所帮助