ionic2实战-使用高德地图javascript api

作者: 昵称已被使用_ | 来源:发表于2017-02-25 14:52 被阅读4628次

前言

去这里注册成为高德个人开发者并登录高德开放平台
如下图,高德地图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上添加地图

复制如下代码到appindex.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

网友评论

ec7154608c72:大佬，你这个运行在手机上用流量定位的时候会出现较大的偏差怎么弄呢，用wifi定位的话就挺准的

昵称已被使用_:@ec7154608c72 流量在室内定位是不准，在室外还行吧，一般偏差大概在30米内，除非是在信号不好的地方。可以和高德地图app定位对比下

C_ceab:大神大神，目前要实现一个定时向后台发送用户位置的功能，有什么比较好的思路麽？还请大神多多指教，感谢~

C_ceab:@小军617 好的谢谢

昵称已被使用_:@C_ceab setTimeout

eff0f6ac4817:没有执行document.addEventListener('deviceready', function(){
window.LocationPlugin.getLocation(successCallback,errorCallback);
}, false);
是插件没有插上吗？

9cfca6cadad0:楼主，楼主，我
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 高德地图请问楼主怎么解决

f7da14019c0d:小军，你好，你这个例子真的很好，先谢谢。参考你的程序尤其providers下封装功能，做了简单的数据展示和提交。安卓和苹果本来都没有问题，但提交appstore审核，报错如下：

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? 请多多指教，感谢！

昵称已被使用_:@卍解我猜你app应该是用第三方的sdk，你可以删除第三方sdk插件测试试试。如极光推送插件

ce597d91726f:你好，楼主，我想问一下你，具体实现的步骤在GitHub上我没找到。

ce597d91726f:@小军617 谢谢楼主

昵称已被使用_:http://yanxiaojun.me/ionic2_tabs/dist/index.html
在这里>我的>工作地图看demo

昵称已被使用_:https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/shared/map-component/map-location/map-location.html

87c87c5475a3:楼主，非常感谢，最近学习ionic基本都是跟着你的demo走的，太有用了。

昵称已被使用_:@十二月二十号

bebd89445c90:大神，求完整地图源码下载地址

昵称已被使用_:@晨枫_bc96 https://github.com/yanxiaojun617/ionic2_tabs/

204de2c5fa00:@小军617 您好我想请问一下我只要用到驾车或者步行刚刚进去导航页面就不对，我的定位对，搜索对；我没用到极光，把storage中的话也注册了，可是还是闪退？？您知道为什么吗？

昵称已被使用_:@微风拂面513

https://github.com/yanxiaojun617/ionic2_tabs/跑我的项目

204de2c5fa00:@小军617 我建立了一个新的项目项目里就有它也是闪退

昵称已被使用_:@微风拂面513 建议你搞个空白项目,只添加定位和导航功能,看是否有毛病

小彭友_35d0:楼主，我想知道怎么在providers文件里面创建一个全局的API

昵称已被使用_:能说具体点么

DONG999:咨询下，输入任意地址后，如何获得地图上的地址的坐标呢
我用百度，没能实现

DONG999:@小军617 谢谢

昵称已被使用_:http://lbs.amap.com/api/javascript-api/example/geocoder/geocoding

清丶虹:博主，你这个app添加android平台的时候好像有点问题，不能在真机运行

昵称已被使用_:

.....

会飞的tiger:弄了一天，一步一步的按照你的文章，始终报错，说key错误，实在不清楚key哪里错了。。。

昵称已被使用_:高德地图key有4种,web端,android端,ios端和静态地图key
本文申请web端key,填到index.html.如果申请android key则需要填在插件plugin.xml中.plugins/com.kit.cordova.amaplocation/plugin.xml
所以,你不要搞混了

Lovelorndiary:为什么我下载下来用不了同事的可以

来日可期_久:请问您用高德地图api 有碰到过 map is not defined 这个问题吗？？？

Kathy丶Andy:@WAWAWAW <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key="; "&plugin=AMap.Geocoder"></script>
你看你加这句话没 &plugin=AMap.Geocoder"

昵称已被使用_:@Kathy丶Andy 是因为index.html没有引入高德地图api吗?
看这里18行https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/index.html

Kathy丶Andy:你的这个问题解决了么

想嘟:多操作一会就会出现内存爆满闪退问题，有解决办法吗？

昵称已被使用_:

现在还有问题吗

summerhe:我把这个demo下载下来，运行了npm install ，安装好依赖包后，运行ionic serve 报错了，错误如下：Typescript Error
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';

昵称已被使用_:直接运行没问题的,那你试试用cnpm install安装依赖

summerhe:需要重新编译@ionic-native？

世界这么大_我只想看你:用的什么开发工具呢

昵称已被使用_:@世界这么大_我只想看你我用的是webstorm
去官网下载http://www.jetbrains.com/webstorm/
在这里获取破解码http://idea.lanyus.com/

西山侠客:不错，学习了

昵称已被使用_: @冯昌伟 ~(*+﹏+*)~

ec7154608c72:大佬，你这个运行在手机上用流量定位的时候会出现较大的偏差怎么弄呢，用wifi定位的话就挺准的
昵称已被使用_:@ec7154608c72 流量在室内定位是不准，在室外还行吧，一般偏差大概在30米内，除非是在信号不好的地方。可以和高德地图app定位对比下
C_ceab:大神大神，目前要实现一个定时向后台发送用户位置的功能，有什么比较好的思路麽？还请大神多多指教，感谢~
C_ceab:@小军617 好的谢谢
昵称已被使用_:@C_ceab setTimeout
eff0f6ac4817:没有执行document.addEventListener('deviceready', function(){
window.LocationPlugin.getLocation(successCallback,errorCallback);
}, false);
是插件没有插上吗？
9cfca6cadad0:楼主，楼主，我
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 高德地图请问楼主怎么解决
f7da14019c0d:小军，你好，你这个例子真的很好，先谢谢。参考你的程序尤其providers下封装功能，做了简单的数据展示和提交。安卓和苹果本来都没有问题，但提交appstore审核，报错如下：

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? 请多多指教，感谢！
昵称已被使用_:@卍解我猜你app应该是用第三方的sdk，你可以删除第三方sdk插件测试试试。如极光推送插件
ce597d91726f:你好，楼主，我想问一下你，具体实现的步骤在GitHub上我没找到。
ce597d91726f:@小军617 谢谢楼主
昵称已被使用_:http://yanxiaojun.me/ionic2_tabs/dist/index.html
在这里>我的>工作地图看demo
昵称已被使用_:https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/shared/map-component/map-location/map-location.html
87c87c5475a3:楼主，非常感谢，最近学习ionic基本都是跟着你的demo走的，太有用了。
昵称已被使用_:@十二月二十号
bebd89445c90:大神，求完整地图源码下载地址
昵称已被使用_:@晨枫_bc96 https://github.com/yanxiaojun617/ionic2_tabs/
204de2c5fa00:@小军617 您好我想请问一下我只要用到驾车或者步行刚刚进去导航页面就不对，我的定位对，搜索对；我没用到极光，把storage中的话也注册了，可是还是闪退？？您知道为什么吗？
昵称已被使用_:@微风拂面513 https://github.com/yanxiaojun617/ionic2_tabs/跑我的项目
204de2c5fa00:@小军617 我建立了一个新的项目项目里就有它也是闪退
昵称已被使用_:@微风拂面513 建议你搞个空白项目,只添加定位和导航功能,看是否有毛病
小彭友_35d0:楼主，我想知道怎么在providers文件里面创建一个全局的API
昵称已被使用_:能说具体点么
DONG999:咨询下，输入任意地址后，如何获得地图上的地址的坐标呢
我用百度，没能实现
9cfca6cadad0:楼主，楼主，我
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 高德地图请问楼主怎么解决
DONG999:@小军617 谢谢
昵称已被使用_:http://lbs.amap.com/api/javascript-api/example/geocoder/geocoding
清丶虹:博主，你这个app添加android平台的时候好像有点问题，不能在真机运行
昵称已被使用_: .....
会飞的tiger:弄了一天，一步一步的按照你的文章，始终报错，说key错误，实在不清楚key哪里错了。。。
昵称已被使用_:高德地图key有4种,web端,android端,ios端和静态地图key
本文申请web端key,填到index.html.如果申请android key则需要填在插件plugin.xml中.plugins/com.kit.cordova.amaplocation/plugin.xml
所以,你不要搞混了
Lovelorndiary:为什么我下载下来用不了同事的可以
来日可期_久:请问您用高德地图api 有碰到过 map is not defined 这个问题吗？？？
Kathy丶Andy:@WAWAWAW <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key="; "&plugin=AMap.Geocoder"></script>
你看你加这句话没 &plugin=AMap.Geocoder"
昵称已被使用_:@Kathy丶Andy 是因为index.html没有引入高德地图api吗?
看这里18行https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/index.html
Kathy丶Andy:你的这个问题解决了么
想嘟:多操作一会就会出现内存爆满闪退问题，有解决办法吗？
昵称已被使用_: 现在还有问题吗
summerhe:我把这个demo下载下来，运行了npm install ，安装好依赖包后，运行ionic serve 报错了，错误如下：Typescript Error
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';
昵称已被使用_:直接运行没问题的,那你试试用cnpm install安装依赖
summerhe:需要重新编译@ionic-native？
世界这么大_我只想看你:用的什么开发工具呢
昵称已被使用_:@世界这么大_我只想看你我用的是webstorm
去官网下载http://www.jetbrains.com/webstorm/
在这里获取破解码http://idea.lanyus.com/
西山侠客:不错，学习了
昵称已被使用_: @冯昌伟 ~(*+﹏+*)~

ionic2实战-使用高德地图javascript api

前言

申请key

在app上添加地图

完善地图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ionic2实战

ionic3+