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",的确是泛泛而谈,我们来看一下百度地图的 ...
随机推荐
- java基础编程——获取栈中的最小元素
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 题目代码 /** * Created by YuKai Fan on 2018/9 ...
- Vue2+webpack+node 配置+入门+详解
Vue2介绍 1.vue2.0 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层 采用单文件组件 复杂大型单页应用程序(SPA) 响 ...
- 数据分析处理库Pandas——索引
显示DataFrame结构中的指定列 使用iloc索引 指定一行的信息 指定多行信息 备注:第[1,5)行信息. 指定行和列 备注:第[0,5)行中第[1,3)列信息. 使用loc索引 指定行信息 备 ...
- 科学计算库Numpy——随机模块
np.random.rand() 随机生成一个[0,1)之间的浮点数. 参数表示数组的维数 np.random.randint() 生成一个随机的整数数组. 备注:生成一个5*4的二维数组,数组中的每 ...
- 怎么选取训练神经网络时的Batch size?
怎么选取训练神经网络时的Batch size? - 知乎 https://www.zhihu.com/question/61607442 深度学习中的batch的大小对学习效果有何影响? - 知乎 h ...
- Play on Words HDU - 1116 (并查集 + 欧拉通路)
Play on Words HDU - 1116 Some of the secret doors contain a very interesting word puzzle. The team o ...
- Building a Space Station POJ - 2031
Building a Space Station POJ - 2031 You are a member of the space station engineering team, and are ...
- The Moving Points - HDU - 4717 (模拟退火)
题意 二维空间中有\(n\)个运动的点,每个点有一个初始坐标和速度向量.求出一个时间\(T\),使得此时任意两点之间的最大距离最小.输出\(T\)和最大距离. 题解 模拟退火. 这个题告诉了我,初始步 ...
- 菜鸟学Linux - 用户与用户组基础
/etc/passwd: 用户的信息是保存在/etc/passwd下面(早期的时候,用户的密码也是放在该文件中.后来出于安全考虑,将密码放在/etc/shadow中去): /etc/group: 用户 ...
- python 闯关之路四(下)(并发编程与数据库编程) 并发编程重点
python 闯关之路四(下)(并发编程与数据库编程) 并发编程重点: 1 2 3 4 5 6 7 并发编程:线程.进程.队列.IO多路模型 操作系统工作原理介绍.线程.进程演化史.特点.区别 ...