前言
- 去这里注册成为高德个人开发者并登录高德开放平台
- 如下图,高德地图API分web端、Android平台、IOS平台,还不熟悉高德开发平台的同学请先花半天时间浏览一下
- 本博文主讲在app上使用web端api,如果需要精确定位和导航功能可以看这里
- 特别强调:在做ionic App使用使用高德地图功能时,只有定位和导航需要使用高德android和ios api,其余的地图功能均使用avascript api.由于已有封装好的定位和导航插件,所以基本上只需要熟读javascript api就够了,点这里查看高德javascript api示例
申请key
- 必看JavaScript API入门指南
- 去控制台申请web端key,点击控制台右上角的
创建应用按钮,创建一个应用,应用名一般和项目名相同,然后在添加一个__web端__key,如下图
创建一个应用
添加一个web端key
生成了web端key
在app上添加地图
- 复制如下代码到app
index.html页面的<head>标签中,如下图
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的高德地图web端key"></script>
- 在一个.html创建一个div
<ion-content>
<div #map_container class="map_container"></div>
</ion-content>
页面上添加有一个div
- 设置div宽高为100%
page-home {
.map_container {
width: 100%;
height: 100%;
}
}
设置div宽高为100%
-
如下图,创建对图对象
import {Component, ViewChild, ElementRef} from '@angular/core'; declare var AMap; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { @ViewChild('map_container') map_container: ElementRef; map: any;//地图对象 constructor() { } ionViewDidEnter() { this.map = new AMap.Map(this.map_container.nativeElement, { view: new AMap.View2D({//创建地图二维视口 zoom: 11, //设置地图缩放级别 rotateEnable: true, showBuildingBlock: true }) }); } }
创建对图对象
- 执行
ionic serve启动app,就可以看到地图啦
显示地图
完善地图
- 完善后的app如下图,完整代码已上传至github
完善后的功能.gif
网友评论
window.LocationPlugin.getLocation(successCallback,errorCallback);
}, false);
是插件没有插上吗？
showCityInfo() {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP，返回当前城市
citysearch.getLocalCity(function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
this.city=cityinfo; //这里出错
console.log(cityinfo);
}
} else {
}
});
会报错 然后我在外面console.log(this.city);
控制台报的是undefined,就是城市定位取不出来
我取经纬度lnglat也是取不出来。
ionic 高德地图 请问楼主怎么解决
We discovered one or more bugs in your app when reviewed on iPhone running iOS 11.3 on Wi-Fi connected to an IPv6 network.
We were not able to fully load your app content after launch.
Please see attached screenshots for details.
审核截屏就是白屏，我用mac的ipv6热点试了确实app打开就是黑屏（启动广告都没出来）。苹果ipv4下没有任何问题，安卓都没有问题。
个人猜测angular/http不支持IPV6? 请多多指教，感谢！
在这里>我的>工作地图看demo
我用百度， 没能实现
showCityInfo() {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP，返回当前城市
citysearch.getLocalCity(function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
this.city=cityinfo; //这里出错
console.log(cityinfo);
}
} else {
}
});
会报错 然后我在外面console.log(this.city);
控制台报的是undefined,就是城市定位取不出来
我取经纬度lnglat也是取不出来。
ionic 高德地图 请问楼主怎么解决
本文申请web端key,填到index.html.如果申请android key则需要填在插件plugin.xml中.plugins/com.kit.cordova.amaplocation/plugin.xml
所以,你不要搞混了
你看你加这句话没 &plugin=AMap.Geocoder"
看这里18行https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/index.html
Module '"C:/Users/summer/Desktop/ionic2_tabs-master/node_modules/@ionic-native/core/index"' has no exported member 'IonicNativePlugin'.
...mer/Desktop/ionic2_tabs-master/node_modules/@ionic-native/app-version/index.d.ts
import { IonicNativePlugin } from '@ionic-native/core';
去官网下载http://www.jetbrains.com/webstorm/
在这里获取破解码http://idea.lanyus.com/