使用js方式在ionic3中使用百度地图

最新推荐文章于 2021-08-13 09:43:34 发布

是阿晋啊

最新推荐文章于 2021-08-13 09:43:34 发布

阅读量654

点赞数

分类专栏：软件 ionic 文章标签： ionic js

本文链接：https://blog.csdn.net/qq_38255285/article/details/87948729

版权

软件同时被 2 个专栏收录

19 篇文章 2 订阅

订阅专栏

ionic

4 篇文章 1 订阅

订阅专栏

之前angular方法的包括申请秘钥链接https://blog.csdn.net/qq_38255285/article/details/87936561

在ionic工程的index.html文件中的头部<head></head>添加

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
  <script src="cordova.js"></script>

ionic g page baidumap

创建baidumap文件夹

导入头文件

import { Component , ViewChild, ElementRef } from '@angular/core';

头文件后申明

declare var BMap;

构造，其中这个 @ViewChild('map') mapElement: ElementRef;是为了在ts里面读出js，虽然很相近但是毕竟是两种语言。

export class BaidumapPage {
    map:any;
    sizeMap:any;
    mak:any;
    point:any;
    marker:any;
    @ViewChild('map') mapElement: ElementRef;
  constructor( 
  ){
  }

下面是函数，总体来说跟我在做qt时期调用map.html差不多

addMarker(point:any){
	  this.marker = new BMap.Marker(point);
		this.map.addOverlay(this.marker);
		this.marker.setLabel("11");
	}

  addMarker1(point:any,label:string){
	  this.marker = new BMap.Marker(point);
		this.map.addOverlay(this.marker);
	  this.marker.setLabel(label);
  }
  
  ionViewWillEnter() {
    this.map = new BMap.Map(this.mapElement.nativeElement, { enableMapClick: true });//创建地图实例
    this.map.enableScrollWheelZoom();//启动滚轮放大缩小，默认禁用
    this.map.enableContinuousZoom();//连续缩放效果，默认禁用
    this.point = new BMap.Point(118.719438, 32.209020);//坐标可以通过百度地图坐标拾取器获取
    this.map.centerAndZoom(this.point, 16);//设置中心和地图显示级别
    this.sizeMap = new BMap.Size(10, 80);//显示位置
    this.map.addControl(new BMap.NavigationControl({
    // anchor: BMAP_ANCHOR_BOTTOM_RIGHT,//显示方向
    offset:this.sizeMap
  }));
  // this.addMarker(this.point);
  this.addMarker1(this.point,'222');
  }

scss文件中，和在angular里面差不多

page-baidumap {

    #map{
        width: 100%;
        height: 100%; 
        display: block;
        overflow: hidden;
        margin:0;
        font-family:"微软雅黑";
     
    }
    .scroll{
        height: 100%;
    }
        //这个用来隐藏百度地图的logo
        .anchorBL{
            display: none;
          }
}

html文件，就是主要给了个容器

<ion-header>
  <ion-navbar>
    <ion-title>baidumap</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="map" #map></div>
</ion-content>

总的来说，js方法跟之前的差不多，当初在qt中调用的时候是把三个js，css和html写到一个文件中，而这个是三个文件，本质上是没什么区别，要做别的功能也可以进一步开发，先看下效果图