ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

庆华

2019-06-21

系列教程看这里
Ionic2入门教程（一）安装和环境配置
Ionic2入门教程（二）进阶配置：Android打包
ionic2入门教程（三）高仿网易公开课（1）
ionic2入门教程（四）解读目录结构
ionic2入门教程（五）如何使用IonicPage

Ionic2 & 地图服务

0、效果展示

之前用了官网的native，其中地图服务googlmaps插件在国内是无法使用状态，因为打包后，不仅需要翻墙，翻墙后还需要下载google play 服务最新版，很麻烦，所以这条路基本上走不通的。提醒一下大家~
所以就想不如直接用API，接下来就是初步实现地图基础的展示功能，主要给大家看看各个地图是如何加载的，打包后也都能使用，不过谷歌是被禁，还是需要翻墙噢~
还有就是，以下地图，中心点和缩放级别一致，也为了方便大家进行对比

0.1、谷歌地图

ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

0.2、高德地图

ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

0.3、百度地图（真的是一股清流，瞧瞧这地图偏移，和级别差异）

ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

0.4、更新：百度定位（五种方式：浏览器、GPS、IP、经纬度、城市）

ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

1、实现步骤

1.1、当然是新建一个项目喏

我新建了一个tabs应用，通过下方三个按钮切换，你可以直接通过以下命令行实现

ionic start Ionic-Maps tabs

如果想使用IonicPage创建请看这里（我采用的方式，复杂一些，但有助于你以后效率提高，严肃脸）：

ionic2入门教程（五）如何使用IonicPage

目录结构如下

ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

1.2、挨个申请KEY

放个申请地址，都需要注册账号哦~，具体步骤我后面单独出个教程，不会的可以先百度一下~

Google Map
Maps JavaScript API

高德地图
web端
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

百度地图
浏览器端
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

1.3、index.html

得到key之后，添加以下代码，保证在header之中，尽量靠前吧，好像和加载机制有关系。
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）

<!-- gaode map -->
  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的key"></script>
  

  <!-- js sdk of google map -->
  <script src="http://maps.google.com/maps/api/js?key=你的key"></script>


  <!-- baidumap -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>

1.4、给每一个对应html添加一个div

如：

<ion-content>
  <div #map2 id="map_container2"></div>
</ion-content>

scss：

#map_container2{
    width: 100%;
    height: 100%;
}
//高宽必须有哦，不然你是看不到地图的，因为没有高宽它的大小只是一个点~

1.5、ts文件

Google

//google map
declare var google;

@IonicPage()
@Component({
  selector: 'page-googlemap',
  templateUrl: 'googlemap.html',
})
export class GoogleMapPage {
  //googlemap
  @ViewChild('map1') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    let latLng = new google.maps.LatLng( 23.16,113.23);

    let mapOptions = {
      center: latLng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

  }
}

高德

// gaode map
declare var AMap;

@IonicPage()
@Component({
  selector: 'page-gaodemap',
  templateUrl: 'gaodemap.html',
})
export class GaodeMapPage {
  // gaodemap

  @ViewChild('map2') map_container2: ElementRef;
  map: any;//地图对象

  constructor() {
  }

  ionViewDidEnter() {
    this.load();
  }
  load(){
    this.map = new AMap.Map(this.map_container2.nativeElement, {
      view: new AMap.View2D({//创建地图二维视口
        center:[113.23,23.16],
        zoom: 16, //设置地图缩放级别
        rotateEnable: true,
        showBuildingBlock: true
      })
    });
  }

}

百度

// baidu map
declare var BMap;
declare var BMap_Symbol_SHAPE_POINT;

@IonicPage()
@Component({
  selector: 'page-baidumap',
  templateUrl: 'baidumap.html',
})
export class BaiduMapPage {

  @ViewChild('map') map_container: ElementRef;
  map: any;//地图对象
  marker: any;//标记
  constructor() {

  }

  ionViewDidEnter() {
    let map = this.map = new BMap.Map(this.map_container.nativeElement, { enableMapClick: true });//创建地图实例

    // map.centerAndZoom("广州",17); //设置城市设置中心和地图显示级别
    let point = new BMap.Point(113.23, 23.16);//坐标可以通过百度地图坐标拾取器获取
    map.centerAndZoom(point, 17);//设置中心和地图显示级别

    map.addControl(new BMap.MapTypeControl());  
    // map.setCurrentCity("广州"); 

    let sizeMap = new BMap.Size(10, 80);//显示位置
    map.addControl(new BMap.NavigationControl());


    map.enableScrollWheelZoom(true);//启动滚轮放大缩小，默认禁用
    map.enableContinuousZoom(true);//连续缩放效果，默认禁用
    
    let myIcon = new BMap.Icon("assets/icon/favicon.ico",new BMap.Size(300,157));

    let marker = this.marker = new BMap.Marker(point,{icon:myIcon});
    map.addOverlay(marker);
  }