ionic2如何调用百度地图
使用ionic2接入百度地图
在index.html中引入百度地图的js类库
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
密钥需要到百度地图API官方文档中申请
http://lbsyun.baidu.com/index.php?title=jspopular
html页面内容
<ion-content>
<div id="map" #map></div>
</ion-content>
scss样式文件
#map{
width: 100%;
height: 100%;
display: block;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
}
.scroll{
height: 100%;
}
需要导入的声明文件
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform} from 'ionic-angular';
在typescript中接入百度地图类库
declare var BMap;
使用注解在页面创建视图
export class HomePage {
@ViewChild('map') mapElement: ElementRef;
constructor(
private navCtrl: NavController,
private platform: Platform,
)
定义全局变量,调用初始化方法
ionViewWillEnter() {
let map = this.map = new BMap.Map(this.mapElement.nativeElement, { enableMapClick: true });//创建地图实例
map.enableScrollWheelZoom();//启动滚轮放大缩小,默认禁用
map.enableContinuousZoom();//连续缩放效果,默认禁用
let point = new BMap.Point(116.06827, 22.549284);//坐标可以通过百度地图坐标拾取器获取
map.centerAndZoom(point, 16);//设置中心和地图显示级别
插入百度的一些控件,展示在地图中
//地图放大缩小控件
let sizeMap = new BMap.Size(10, 80);//显示位置
map.addControl(new BMap.NavigationControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,//显示方向
offset: sizeMap
}));
//3D效果矢量图控件
let size3D = new BMap.Size(10, 10);
map.addControl(new BMap.MapTypeControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
offset: size3D
}));
map.setCurrentCity("深圳");//3D效果需要设置城市
//城市列表控件
let sizeCity = new BMap.Size(10, 10);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: sizeCity
}));
添加自定义的控件展示地图中
function showAttractionControl() {
//定义显示位置
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 50);
}
//初始化控件
showAttractionControl.prototype = new BMap.Control();
showAttractionControl.prototype.initialize = function (map) {
let div = document.createElement("button");// 创建一个按钮
div.appendChild(document.createTextNode("附近景点"));
div.style.width = "135px";
div.style.height = "35px";
div.style.borderRadius = "15px";
div.onclick = function (e) {
let local = new BMap.LocalSearch(map, {
renderOptions: { map: map, autoViewport: true }
});
local.search("景点");
}
map.getContainer().appendChild(div);// 添加DOM元素到地图中
return div;
}
let showAttraction = new showAttractionControl();
map.addControl(showAttraction);//添加控件
添加自定义标注在地图中
div.onclick = function (e) {//地图上可以添加自定义标注
let icon = new BMap.Icon('http://pic002.cnblogs.com/images/2011/308287/2011091516161618.png', new BMap.Size(20, 32), {
anchor: new BMap.Size(10, 30),
})//设置标注图片和位置
var mkr = new BMap.Marker(new BMap.Point(116.06827, 22.549284), {
icon: icon,
enableDragging: true,
raiseOnDrag: true
});//设置起始坐标点
map.addOverlay(mkr);//添加标注在地图中并实现拖拽
}
ionic2如何调用百度地图的更多相关文章
- 苹果手机 微信调用百度地图Javascript API 频繁闪退问题
最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的mark ...
- Android中调用百度地图
一.调用百度地图 --第一种方法 1.下载百度地图SDK SDK可以拆分下载,需要使用那一部分功能就下载相应包含的SDK,如下图 核心的的jar 和so包,放在工程中的libs目录下 2.申请key ...
- 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API
因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...
- 调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
- Delphi XE6 通过JavaScript API调用百度地图
参考昨天的内容,有朋友还是问如何调用百度地图,也是,谁让咱都在国内呢,没办法,你懂的. 首先去申请个Key,然后看一下百度JavaScript的第一个例子:http://developer.baidu ...
- js调用百度地图接口
原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...
- Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码
(从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...
- [置顶]
Xamarin android如何调用百度地图入门示例(一)
在Xamarin android如何调用百度地图呢? 首先我们要区分清楚,百度地图这是一个广泛的概念,很多刚刚接触这个名词"百度地图api",的确是泛泛而谈,我们来看一下百度地图的 ...
随机推荐
- 漫谈 Clustering (番外篇): Expectation Maximization
Expectation Maximization (EM) 是一种以迭代的方式来解决一类特殊最大似然 (Maximum Likelihood) 问题的方法,这类问题通常是无法直接求得最优解,但是如果引 ...
- javascrit中“字符串为什么可以调用成员”
<script> var title = "this is title"; console.log(title.substr(0,5)); //字符串为什么可以调用 ...
- modprobe与insmod的区别
linux设备驱动有两种加载方式insmod和modprobe,下面谈谈它们用法上的区别1.insmod一次只能加载特定的一个设备驱动,且需要驱动的具体地址.写法为: insmod dr ...
- ambari过程中要求各个节点时间同步
设置时间同步 控制节点机器 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime #设置时区为北京时间,这里为上海,因为centos里面只有上海... ...
- 【6.20校内test】
反正考的不是很好吧,赶脚炸了啊qwq 然后这两天一直在忙一些神奇的事情,所以没有整理完 手动@water_lift T1:大美江湖: [题目背景] 细雪飘落长街,枫叶红透又一年 不只为故友流连,其实我 ...
- eclipse部署web项目至本地的tomcat但在webapps中找不到问题
一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...
- Drop it-freecodecamp算法题目
Drop it 1.要求 丢弃数组(arr)的元素,从左边开始,直到回调函数return true就停止. 第二个参数,func,是一个函数.用来测试数组的第一个元素,如果返回fasle,就从数组中抛 ...
- (转)为什么在 2013 十月番中出现了很多以 3D 渲染代替传统 2D 绘画来表现人物的镜头?
一直都有的,特别是三次元这家公司一直致力于3d的风格化渲染既大家说的3d转2d.目前最厉害的商业化软件是pencil+,占领大部分的作品.而mentalray,早期用于disney的部分风格化渲染:i ...
- php中foreach循环遍历二维数组
最近在用tp3.2框架,在查询的时候用到了select(),这条语句返回的是二维数组,所以在对返回的数据做处理时,遇到了些麻烦,百度了下foreach,终于用foreach解决了数据的筛选问题 (因为 ...
- float浮动布局(慕课网CSS笔记 + css核心技术详解第四章)
---------------------------------------------------------------------- CSS中的position: CSS三种布局方式: 标准流 ...