ionic2 百度地图应用

ionic2 百度地图集成

demo: https://github.com/wangzuxing/myionic2prj

1、创建项目工程(命令行方式)

ionic start myionic2prj blank --v2      //--v2 参数 指示创建ionic2工程
cd myionic2prj

2、
npm install //或使用”cnpm install” 主要完成安装所需模块（根据package.json中的配置参数指明所需模块）到node_modules目录，同时会生成相应的配置项在config.xml中

3、

ionic platform add android             // 添加platform支持

4、
src/index.html中添加

<head>...<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uhfNa0vlBkdS28Vh096yehMugu3T7YqN">//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"</script>...
</head>

src/pages/my-page1/my-page1.html:

<ion-header><ion-navbar><ion-title>AMap</ion-title></ion-navbar>
</ion-header><ion-content padding><div id="container" style="height: 500px;"></div>
</ion-content>

src/pages/my-page1/my-page1.ts文件中导入应用:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';declare var AMap; //declare var AMap: any;/*** Generated class for the MyPage1 page.** See http://ionicframework.com/docs/components/#navigation for more info* on Ionic pages and navigation.*/
@IonicPage()
@Component({selector: 'page-my-page1',templateUrl: 'my-page1.html',
})export class MyPage1 {public map: any;constructor(public navCtrl: NavController, public navParams: NavParams) {}ionViewDidLoad() {console.log('Loading Amap');this.loadMap();this.loadToolBar();}loadToolBar(){AMap.plugin('AMap.ToolBar',function(){//异步var toolbar = new AMap.ToolBar();this.map.plugin(toolbar);});}loadMap() {this.map = new AMap.Map('container', {resizeEnable: true,//mapStyle:'normal',  地图类型: normal  dark  blue_night  fresh  lightzoom: 15,center: [113.400675, 22.88816]});function refresh(e) {this.map.setMapStyle("dark");};//创建并添加工具条控件AMap.pluginthis.map.plugin(['AMap.ToolBar'], function () {this.map.addControl(new AMap.ToolBar());});//创建高级信息窗体并在指定位置打开this.map.plugin(['AMap.AdvancedInfoWindow'],function(){var infowindow = new AMap.AdvancedInfoWindow({content: '<div class="info-title">高德地图</div><div class="info-content">'+'<img src="http://webapi.amap.com/images/amap.jpg">'+'高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br>'+'<a target="_blank" href="http://mobile.amap.com/">点击下载高德地图</a></div>',offset: new AMap.Pixel(0, -30)});infowindow.open(this.map, this.map.getCenter());//[116.480983, 39.989628]);});let marker = new AMap.Marker({position: this.map.getCenter(),draggable: true,cursor: 'move'});marker.setLabel({offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置content: "华科尔科技有限公司"});marker.on('click',function(e){marker.markOnAMAP({name:'华科尔科技',position:marker.getPosition()})});//marker.content='华科尔科技有限公司'+this.map.getCenter(); //marker.on('click', markerClick); //绑定单击事件marker.setMap(this.map);// 设置点标记的动画效果，此处为弹跳效果marker.setAnimation('AMAP_ANIMATION_BOUNCE');function markerClick(e){var infoWindow = new AMap.InfoWindow();infoWindow.setContent(e.target.content);infoWindow.open(this.map, e.target.getPosition());};}goToHomePage() {//push another page onto the history stack//causing the nav controller to animate the new page in//this.navCtrl.push(HomePage);this.navCtrl.pop();}}

5、

ionic run android                      //android真机/模拟器调试

ionic2 百度地图应用相关推荐

百度地图android室内定位,百度地图4.0正式发布，主打免费语音导航、室内定位、实时公交和生活搜索 (视频)...
自2010年10月百度地图在塞班平台上线了第一个版本以后,陆续登陆了Android和iPhone平台,据百度地图团队介绍,其最新的用户数已达7000万.今天,百度地图4.0 正式发布(iPhone版 ...
百度地图轨迹回放,自定义路书,边走边画线
转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...
百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
html 高德地图坐标,百度地图，高德地图，HTML5经纬度比较
对于一个地点的经纬度,是确定的?这个问题,我想很多人都会回答,肯定了,可实际上呢?我只能呵呵了. 在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地 ...
gps两点距离 php,PHP应用：PHP计算百度地图两个GPS坐标之间距离的方法
<PHP应用:PHP计算百度地图两个GPS坐标之间距离的方法>要点: 本文介绍了PHP应用:PHP计算百度地图两个GPS坐标之间距离的方法,希望对您有用.如果有疑问,可以联系我们. 本文实 ...
一行CSS样式去除百度地图版权，去除百度地图右上角平移缩放控件的市县区文字
/*去除百度地图版权,去除百度地图右上角平移缩放控件的市县区文字*/ .anchorBL, .BMap_zlHolder {display: none;visibility: hidden;}
Vue引入百度地图，如何去掉左下角的版权logo百度等信息？
参考解决Vue用v-html.v-text渲染后台富文本框文本内容样式修改问题,用自定义css样式无法渲染出对应效果的问题_你挚爱的强哥❤给你发来1条消息❤-CSDN博客原理 /*#SGbaiduma ...
H5使用百度地图SDK获取用户当前位置并且标记显示在地图
代码实现功能: H5使用百度地图SDK获取用户当前位置并且标记显示在地图,点击该标记弹出一层自定义的HTML. 效果图: 代码: <!DOCTYPE html> <html>& ...
【百度地图API】——如何用label制作简易的房产标签
摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产标签的方法呢? 答案当然是有的啦~ 我们可以利用label嘛! ...

ionic2 百度地图应用

ionic2 百度地图应用相关推荐

最新文章

热门文章