1.前置条件

第一步,注册高德开发者;第二步,去控制台创建应用;第三步,获取Key。

2.打开src目录下的index.html, 在head标签中添加以下代码,引入js:

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

注意,该js必须放在以下代码的前面:

<script src="build/main.js"></script>

3.创建容器

在需要显示地图的html页面上添加如下代码

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

添加样式文件

#container {width:100%; height: 100%; }

4.声明AMap对象并创建地图

在页面的ts文件中添加如下代码:

public map: any;//地图对象

并声明地图对象

declare var AMap;

定义一个加载地图方法

loadMap() {
this.map = new AMap.Map('container', {
resizeEnable: true,
zoom: 11,
center: [125.3245, 43.886841]
});
}

调用这个自定义方法

  ionViewDidLoad() {
this.loadMap();
console.log('ionViewDidLoad MapPage');
}

完整代码如下:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
declare var AMap;
@IonicPage()
@Component({
selector: 'page-map',
templateUrl: 'map.html',
}) export class MapPage {
public map: any;//地图对象 constructor(public navCtrl: NavController, public navParams: NavParams) {
} ionViewDidLoad() {
this.loadMap();
console.log('ionViewDidLoad MapPage');
} loadMap() {
this.map = new AMap.Map('container', {
resizeEnable: true,
zoom: 11,
center: [125.3245, 43.886841]
});
}
}

ionic3安卓平台引用高德地图的更多相关文章

  1. vue 引用高德地图

    vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...

  2. H5高德地图获取当前位置

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. Vue-Cli 3.0 中配置高德地图

    vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存 ...

  4. 高德地图POI采集(URL-API)

    新手从零学起,成功跑通,记一下,技术大神们多多指点. ———————————————— 1-概述 POI:兴趣点.对于百度.高德等电子地图来说,一个POI是地图上的一个店铺/商场/小区等等. 这次要解 ...

  5. Android 高德地图 java.lang.UnsatisfiedlinkError Native method not found: com.autonavi.amap.mapcore.MapCore.nativeNewInstance:(Ljava/lang/String;)

    在Android项目中引用高德地图,程序运行时出现上述问题,如果引用了Map3D的jar包,则需要在引入Jar文件的同时引入so文件,在高德地图的demo中,找到so文件: 然后将其复制到jniLib ...

  6. 安卓开发笔记①:利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边(位置)

    高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...

  7. 安卓---高德地图API应用

    说明:定位需要导入android_location 的jar包,如果没有会报错,这个官方网站好像找不到,这是我在网上找到的一个链接 http://download.csdn.net/detail/ra ...

  8. 引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤

    ①在高德地图开发平台注册一个账号,获取key ②添加新的key ③引入map插件 ④复制过来map的脚本代码和编写搜索框 <script type="text/javascript&q ...

  9. ionic3 打包安卓平台环境搭建报错解决方案总结

    1.jvm虚拟机提供的运行空间小于项目所需的空间是报错.如图: 解决方法:在环境变量中配置jvm的运行内存大小,大于所需的内存即可. 其中:-Xmx512M可根据实际提示情况,进行更改,如1024M, ...

随机推荐

  1. prometheus热重启

    prometheus启动命令添加参数 --web.enable-lifecycle 然后热重启:curl -XPOST http://localhost:9090/-/reload

  2. php如何以post形式发送xm并返回xmll数据

    post的数据为xml字符串,通过 $xml = simplexml_load_string($post_data);转换成xml对象 $header[] = "Content-type: ...

  3. 6 款最棒的 Go 语言 Web 框架简介

    地址: https://studygolang.com/articles/11897?fr=sidebar

  4. 添加浏览器back操作时的响应事件

    https://blog.csdn.net/xcqingfeng/article/details/70800118 $(function(){ pushHistory(); window.addEve ...

  5. Harries-高性能分布式Asp.net通信框架

    http://www.harries.cn/ 轻量级.免费.高并发的ASP.NET分布式通信框架 一.Harries简介: Harries Communication Framework 是一款基于C ...

  6. spoj Minimax Triangulation

    题解: dp+计算几何 F[i][j]表示第i-j条边的答案 然后转移一下 代码: #include<bits/stdc++.h> using namespace std; ]; ][]; ...

  7. PHP爬虫

    使用PHP的curl扩展抓取页面数据 PHP的curl扩展是PHP支持的允许你与各种服务器使用各种类型的协议进行连接和通信的库. 本程序是抓取知乎的用户数据,要能访问用户个人页面,需要用户登录后的才能 ...

  8. Homework 2.0

    一.第一题,要求是输入不同的字符的时候输出不同的结果,这道题主要是运用输入和输出语言还有判断语句,分别使用switch和if else来进行输入字符的判断,本体比较简单,注意定义输入变量的类型为cha ...

  9. asp.net mvc模板布局

  10. .NET并行计算和并发8-QueueUserWorkItem异步

      QueueUserWorkItem方法将非常简单的任务排入队列 下面这个简单的代码,涉及到资源竞争问题,如果主线程先争取到资源,如果没有等待 一段时间,那么QueueUserWorkItem申请的 ...