ionic2 百度地图应用

最新推荐文章于 2019-12-11 10:30:31 发布

keen_zuxwang

最新推荐文章于 2019-12-11 10:30:31 发布

阅读量3.6k

点赞数

分类专栏： hybrid app 文章标签： ionic2 百度地图

本文链接：https://blog.csdn.net/keen_zuxwang/article/details/71430476

版权

hybrid app 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

ionic2 百度地图集成

demo: https://github.com/wangzuxing/myionic2prj

1、创建项目工程(命令行方式)

ionic start myionic2prj blank --v2      //--v2 参数 指示创建ionic2工程
cd myionic2prj

2、
npm install //或使用”cnpm install” 主要完成安装所需模块（根据package.json中的配置参数指明所需模块）到node_modules目录，同时会生成相应的配置项在config.xml中

3、

ionic platform add android             // 添加platform支持

4、
src/index.html中添加

<head>
  ...
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uhfNa0vlBkdS28Vh096yehMugu3T7YqN">
  //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
  </script>
  ...
</head>

src/pages/my-page1/my-page1.html:

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

<ion-content padding>
    <div id="container" style="height: 500px;"></div>
</ion-content>

src/pages/my-page1/my-page1.ts文件中导入应用:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

declare var AMap; //declare var AMap: any;

/**
 * Generated class for the MyPage1 page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-my-page1',
  templateUrl: 'my-page1.html',
})

export class MyPage1 {
  public map: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('Loading Amap');
    this.loadMap();
    this.loadToolBar();
  }

  loadToolBar(){
    AMap.plugin('AMap.ToolBar',function(){//异步
      var toolbar = new AMap.ToolBar();
      this.map.plugin(toolbar);
    });
  }

  loadMap() {
    this.map = new AMap.Map('container', {
      resizeEnable: true,
      //mapStyle:'normal',  地图类型: normal  dark  blue_night  fresh  light
      zoom: 15,
      center: [113.400675, 22.88816]
    });

    function refresh(e) {
      this.map.setMapStyle("dark");
    };

    //创建并添加工具条控件AMap.plugin
    this.map.plugin(['AMap.ToolBar'], function () {
      this.map.addControl(new AMap.ToolBar());
    });

    //创建高级信息窗体并在指定位置打开
    this.map.plugin(['AMap.AdvancedInfoWindow'],function(){
      var infowindow = new AMap.AdvancedInfoWindow({
        content: '<div class="info-title">高德地图</div><div class="info-content">'+
            '<img src="http://webapi.amap.com/images/amap.jpg">'+
            '高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br>'+
            '<a target="_blank" href="http://mobile.amap.com/">点击下载高德地图</a></div>',
        offset: new AMap.Pixel(0, -30)
      });
      infowindow.open(this.map, this.map.getCenter());//[116.480983, 39.989628]);
    });

    let marker = new AMap.Marker({
      position: this.map.getCenter(),
      draggable: true,
      cursor: 'move'
    });

    marker.setLabel({
      offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
      content: "华科尔科技有限公司"
    });

    marker.on('click',function(e){
      marker.markOnAMAP({
        name:'华科尔科技',
        position:marker.getPosition()
      })
    });

    //marker.content='华科尔科技有限公司'+this.map.getCenter(); 
    //marker.on('click', markerClick); //绑定单击事件

    marker.setMap(this.map);
    // 设置点标记的动画效果，此处为弹跳效果
    marker.setAnimation('AMAP_ANIMATION_BOUNCE');

    function markerClick(e){
      var infoWindow = new AMap.InfoWindow();
      infoWindow.setContent(e.target.content);
      infoWindow.open(this.map, e.target.getPosition());
    };
  }

  goToHomePage() {
     //push another page onto the history stack
     //causing the nav controller to animate the new page in
     //this.navCtrl.push(HomePage);
     this.navCtrl.pop();
  }

}

5、

ionic run android                      //android真机/模拟器调试

这里写图片描述

keen_zuxwang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录