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中本人使用了各种方式也没有成功。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,342评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,901评论 25 709
  • 共享单车的火爆为地图类应用带来了崭新的使用场景,百度地图抓住时机地增加了共享单车的功能入口,同时新增了“地铁+共享...
    baolvlv阅读 22,337评论 4 118
  • 茶文化的传承与发展,形成了各种表现形式,但是直至今天,都没有哪个权威的个人或组织对中国茶叶文化纳于“茶道”两字。而...
    茶人未晓師古坊主人阅读 3,505评论 2 2
  • 2017.5.9 周二 小雨 亲子日记第四天 今天下雨,所以我爸送我上学,到了学校也是平常的情景:孙李翰、谭宇...
    鑫隆妈妈阅读 1,247评论 0 0

友情链接更多精彩内容