美文网首页Ionic 2 花瓣 ..
Ionic2 使用高德地图

Ionic2 使用高德地图

作者: 待花谢花开 | 来源:发表于2017-06-15 09:00 被阅读89次

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

相关文章

  • Ionic2 使用高德地图

    在ionic2中使用高德地图需要我们在高德地图的开发者平台申请使用web JavaScript API的key。然...

  • swift原生地图与高德地图

    可以使用原生地图,也可以使用高德地图或者其他,高德开发者网站会教你如何在各个平台使用高德地图。 原生地图 记得im...

  • iOS地图导航功能实现

    最简单快捷的方法使用高德地图uri,高德地图uri的具体使用可在高德地图官方网站看,使用非常简单 简单贴下部分代码...

  • 高的地图

    分享 高德地图的使用 地图产品有: 谷歌 百度 高德 腾讯 ArcGis 超图 天地图 ...

  • 高德地图-始终获取屏幕中心点的地址(或经纬度)

    在使用高德地图之前需要现在高德地图开放平台创建一个APP,会自动生成一个appKey,在工程中使用高德地图sdk时...

  • 地图打点

    实现效果如下: 地图打点主要常用的地图分两类: 百度地图 高德地图 高德地图 高德地图可以使用自定义内容标记,通过...

  • iOS 使用高德地图正确姿势(三)

    iOS 使用高德地图正确姿势(一)iOS 使用高德地图正确姿势(二) 实现大头针始终在地图中心,拖动地图实时poi...

  • js实现当前位置定位(获取当前位置地理位置信息)

    1.确定要接入哪家地图平台的api(百度地图,高德地图),本案例中使用的是高德地图2.注册高德地图账号--到个人中...

  • 高德地图导航使用指南

    高德地图是我们常用的导航地图之一,其强大性就不说了,直接开始主题,高德地图导航功能的使用方法。 概览 高德地图导航...

  • 关于高德地图的MAMapView踩坑

    关于高德地图的MAMapView踩坑 在使用高德地图的MAMapView地图的时候碰到无法设置size的情况: 地...

网友评论

    本文标题:Ionic2 使用高德地图

    本文链接:https://www.haomeiwen.com/subject/mnryqxtx.html