Ionic2 使用高德地图

在ionic2中使用高德地图需要我们在高德地图的开发者平台申请使用web JavaScript API的key。然后进行以下步骤使用进行地图的开发，这里我说说为什么我没有使用百度地图。 最开始我是采用的百度地图，但是在使用的过程中发现在使用百度自己封装的一些参数的时候会各种应用不成功，就比如说marker.setAnimation(BMAP_ANIMATION_BOUNCE);中的BMAP_ANIMATION_BOUNCE这个参数，在浏览器中可以直接输出它的值为2，我直接传2的话没有效果，在使用前声明BMAP_ANIMATION_BOUNCE也没有效果，使用window.BMAP_ANIMATION_BOUNCE还是没有效果，最后还是放弃了（希望有解决方法的朋友能指导一二），最终选择了高德地图。 第一步：在项目的index.html中引入JavaScript API

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

第二步：声明AMap然后进行地图初始化，并根据提供的方法进行地图开发 首先在使用地图的html页面中添加div标签，并设置一个id

<div id="container"> </div>

然后编写ts文件

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; declare const AMap: any;//声明 @Component({ selector: 'page-map', templateUrl: 'map.html' }) export class MapPage { constructor(public navCtrl: NavController) { } ionViewDidLoad() { //初始化地图 let map = new AMap.Map('container', { resizeEnable: true, zoom: 11, center: [116.397428, 39.90923] }); AMap.plugin(['AMap.ToolBar'], function () { map.addControl(new AMap.ToolBar()); }) let marker = new AMap.Marker({ position: map.getCenter(), draggable: true, cursor: 'move' }); marker.setMap(map); // 设置点标记的动画效果，此处为弹跳效果 marker.setAnimation('AMAP_ANIMATION_BOUNCE'); } }

这里跟百度地图有个不一样的地方就是百度使用的是marker.setAnimation(BMAP_ANIMATION_BOUNCE);传递的参数在ionic2中本人使用了各种方式也没有成功。