Ionic2使用百度地图API(JS)出现白屏解决方案

最近自学ionic2,写了一个内嵌百度地图JS的demo,实际跑起来之后出现了大家常见的白屏问题。。

最初的实现是这样的:

首先主页内嵌了一个百度地图插件

<div id="Bmap" style="width: 100%;height: 100%">

之后menu中一个引导的子页面也内嵌了一个百度地图

<div id="Bmap" style="width: 100%;height: 100%">

然后ionic serve编译执行,主页面显示正常,而子页面弹出时白屏。。

因为ionic2的本质是一个基于angular2的单页App,因此初步考虑是由于两个页面的地图层id都是Bmap冲突所致。

因此修改子页面百度地图层id

<div id="Smap" style="width: 100%;height: 100%">

再次执行,出现了常见的“第二次加载地图显示不全”的问题。

上网查证,原因是由于百度地图加载时其所在div隐藏或者使用了动画尚未完全显示的关系,解决方案为延迟200毫秒加载:

setTimeout(function(){that.initMap();},200);

执行,这次主页面和子页面的地图都能显示正常了。。

再次改造demo,子页面为一个list,list中每个元素对应一段独立的地图数据,复用地图子页面显示

  itemTapped(event, item) {

    this.navCtrl.push(JourneyDetailsPage, {
      item: item
    });

  }

点击跳转到地图子页面。

这次出现的问题为:主页面正常显示,子页面第一次正常显示,之后白屏。。

分析之后得出结论:因为使用同一个子页面,导致子页面间的地图层id冲突。

修改地图子页面:

<div id="Smap{{index}}" style="width: 100%; height: 100%"></div>
this.index = this.navParams.get(‘item‘)["index"];

index使用从列表传过来的参数做区分,这样以来虽然子页面相同,但每个子页面都将使用不同的地图层id,Smap1、Smap2.。。

创建百度地图代码:

this.map = new BMap.Map("Smap"+this.index.toString());

再次执行,问题彻底解决。

由此可总结出两点内容:

1. Ionic2是基于Angular2的单页应用(特殊需求的除外)

2. Ionic2使用navCtrl或者menu跳转到后一个新页面时,当前页面的上一个页面其实并未完全释放(可能是为页面回退做的优化处理)

出于这两点,使用Ionic2构建应用时,需特别注意不同组件间dom元素的id冲突问题。

以上。。

时间: 2024-10-08 00:29:09

Ionic2使用百度地图API(JS)出现白屏解决方案的相关文章

关于百度地图api测距显示NaN的解决方案

因为随着百度地图的api的升级,测距的函数以及语句都发生的一定变化. 在调用api测距的时候通常我们使用的是语句map.getDistance(marker1,marker2); 但为什么这么简单的测距语句会显示NaN呢,也就是你的有一个点并不是所谓的坐标点.这个苦恼了我很久,因为百度知道上关于确定一个点的坐标都用的是老版本的语句,所以造成了这种后果.在这里要提醒大家,在百度地图api1.3之上的版本,获得marker坐标的语句是marker.getPosition(); 要通过比如marker

百度地图api入门介绍(js篇)

最近因为用到了百度地图的api,感觉还有点用记录一下,一方面充实一下自己,第二也希望有用到的同学可以参考一下:因为之前用过android baidu api  所以再用web  的感觉要比android  简单很多: 步骤: 1.申请秘钥   不多说,自己申请就好了: 2.引入百度地图,设置秘钥 3.编写  百度地图js  类   并且引入 3.这是我写的一个小demo  哈   位置是手机传递过来的具体位置 具体显示如下 最简单的demo  搭建完成  :     百度地图api  有详细步骤

百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面预览 本界面项目由:

从百度地图API中抠出来的一个js方法,计算百度地图坐标距离

从百度地图api(http://developer.baidu.com/map/jsdemo.htm#a6_1)中抠出来的一个js方法,计算百度地图坐标距离 可读行还没还原,能用就行~ function fD(a, b, c) { for (; a > c;) a -= c - b; for (; a < b;) a += c - b; return a; }; function jD(a, b, c) { b != null && (a = Math.max(a, b));

JS调用百度地图API标记地点

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type

乐卡上海网点地图制作心得 | 百度地图API使用心得

前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡.在搜寻过程中,萌生了制作一张基于那些地址的专门戳点地图的想法.期间也看到蚂蚁家制作的北京乐卡地图使用的是百度地图API,但是该网页仅能运行于PC端,手机打开巨卡.刚好我的github博客站最近配置完成了,准备自己也写一个. 材料单 百度开放平台账号一个 百度开放平台浏览器端启用了Javascrip

百度地图api窗口信息自定义

百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delegate() 方法 原文链接http://www.w3school.com.cn/jquery/event_delegate.asp #pop为弹窗容器,#info为弹窗信息 将#info设置成绝对定位信息窗就可以流动了 demo <!DOCTYPE html> <html> <he

【百度地图API】交你如何用百度地图搜索自己的数据!不需数据库!

原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据.我应该怎么办呢? ------------------------------------------------------------------------------------------ 一.无需数据库,如何建立自己的地理信息表. 如果让初学者去建立数据库,那么意味着大家还要学习数据库,

使用百度地图API查地理坐标

在网络编程中,我们会和API打交道.那么,什么是API?如何使用API呢?本文分享了一下我对API的理解以及百度地图API的使用. API是"Application Programming Interface(应用程序编程接口)"的缩写.如果那一大堆的术语和定义让你头晕,不妨试着这样理解:网络服务商(比如百度.微博等)存有大量数据,我们可以查询数据,但是需要按照一定的格式/协议,否则服务商不知道我们的需求无法进行处理,我们拿到数据也看不懂.通过API接口规范,通信双方都能明白对方传送的