ionic3安卓平台引用高德地图
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安卓平台引用高德地图的更多相关文章
- vue 引用高德地图
vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...
- H5高德地图获取当前位置
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- Vue-Cli 3.0 中配置高德地图
vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存 ...
- 高德地图POI采集(URL-API)
新手从零学起,成功跑通,记一下,技术大神们多多指点. ———————————————— 1-概述 POI:兴趣点.对于百度.高德等电子地图来说,一个POI是地图上的一个店铺/商场/小区等等. 这次要解 ...
- 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 ...
- 安卓开发笔记①:利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边(位置)
高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...
- 安卓---高德地图API应用
说明:定位需要导入android_location 的jar包,如果没有会报错,这个官方网站好像找不到,这是我在网上找到的一个链接 http://download.csdn.net/detail/ra ...
- 引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤
①在高德地图开发平台注册一个账号,获取key ②添加新的key ③引入map插件 ④复制过来map的脚本代码和编写搜索框 <script type="text/javascript&q ...
- ionic3 打包安卓平台环境搭建报错解决方案总结
1.jvm虚拟机提供的运行空间小于项目所需的空间是报错.如图: 解决方法:在环境变量中配置jvm的运行内存大小,大于所需的内存即可. 其中:-Xmx512M可根据实际提示情况,进行更改,如1024M, ...
随机推荐
- ranch 源码分析(一)
以前写了一个ranch的处理流程,http://www.cnblogs.com/tudou008/p/5197314.html ,就只有一张图,不是很清晰,现在有空做个源码分析. ranch的源码(版 ...
- 最全面的移动APP测试点
随着互联网,大数据时代的不断推进,演化.移动开发领域得到普遍普及,APP开发如潮水般涌现.下面我将详细介绍app的测试点: 首先我们先熟悉app测试基本流程: 1.1流程图 1.2测试周期 测试周期可 ...
- 『Python』库安装
1.安装指定版本的tensorflow 虽然官网有4种安装方式,并且推荐用anaconda的方式,但是有时候我们需要指定版本的tensorflow,而pip可以做到. 比如我装的是anaconda3. ...
- python - 基础知识,if语句
一.认识计算机 计算机是一个高度集成的电子电路. 组成:CPU(中央处理器).内存 .主板 .电源(心脏) .显示器 .键盘 .鼠标 .显卡(NAVID,AMD) .硬盘 操作系统 :Windo ...
- Docker容器中找不到vim命令
docker容器中,有的并未安装vi和vim,输入命令vim,会提示vim: command not found(如下图).此时我们就要安装vi命令 执行命令:apt-get update apt-g ...
- LimeSDR环境安装与测试
虚拟机:ubuntu虚拟机建议4g内存,64g硬盘,usb3.0已开启 //否则编译过程耗尽内存 1 换阿里云源(加速)# deb cdrom:[Ubuntu 16.04 LTS _Xenial Xe ...
- XSS/XSRF
一.XSS 1.1 xss的含义 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为 ...
- GDT全局描述符表
GDT全局描述符表 什么是GDT全局描述符表 GDT全称为Global Descriptor Table,全局描述符表. 保护模式的寻址方式不在使用寄存器分段的方式直接寻址方式了.而采用的是使用GDT ...
- ES6和ES5变量声明的区别(var let const)
// es5的语法与es6的语法区别 // var let const console.log(name);//undefine,不会报错,因为变量声明会提到作用域的最前面 var name=&quo ...
- CT ubuntu 16.04安装 adobe flash player
sudo apt-get install flashplugin-installer chrome 升级 chrome://chrome-urls/ chrome://components/ 找到A ...