单页面应用引入使用百度地图的坑

最新推荐文章于 2023-07-28 22:29:38 发布

老猪1993

最新推荐文章于 2023-07-28 22:29:38 发布

阅读量1.5k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63853518/article/details/127315697

版权

一，说明：菜鸟总结，有缺陷希望提意见指导，谢谢各位大神。

二，正题：单页面不停进出地图会不停创建实例内存占用，导致内存占用率内存泄漏，使页面崩溃

三，解决方案

1，引入类型type=webgl的地图带有销毁实例方法：<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=自己的ak值"></script>

2，在那个需要销毁实例的加 this.map.destroy();这个销毁方法即可，具体应用如下：

a,同页面内调用地图，在那个调用前加即可

b,不同页面直接调用地图在页面销毁生命周期调用即可

3，如何看内存对比图

a,没加销毁实例调用一次

b,没加销毁实例调用多次

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

老猪1993

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单页面应用引入使用百度地图的坑

菜鸟总结，有缺陷希望提意见指导，谢谢各位大神
复制链接

扫一扫

详解vue.js下引入百度地图jsApi的两种方法

12-11

在Vue.js应用中引入百度地图JS API，通常有两种方法，这两种方法主要针对不同的开发环境和需求。下面将详细讲解这两种方法。 ### 1. 直接引入`<script>`标签这种方法适用于传统的HTML页面或者非单文件组件(SFC)的...

baidumap

llcc_1314的博客

07-25

941

public class MainActivity extends Activity { public static BaiduMap mBaiduMap; MapView mMapView = null; boolean isFirstLoc = true; // 是否首次定位 // 定位相关0p LocationClient mLocClient;

参与评论您还未登录，请先登录后发表或查看评论

WEBGL学习【一】初识WEBGL

小牛itbull的博客

10-26

692

<html lang="zh-CN"> <head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/>  <script type="text/javascript" src="Oak3D_v_0_5....

Vue中使用百度地图引发内存泄露的分析与解决方案

给我一根筷子，我能撬动整个地球

07-30

4125

近来在对vue项目进行优化的时候，发现使用了百度地图组件会引起内存泄露的问题，组件在关闭后没有释放相应的内存，每次打开这个组件，内存都会增加。

百度地图路书开发---增加路书销毁

06-24

1248

1、百度路书BMPGL版源码地址 https://github.com/huiyan-fe/bmapgllib 2、修改路书源文件暂停运动后面加 /** * 清除运动（用户自定义) */ LuShu.prototype.clear = function(){ this._clearMark(); }; Lushu私有方法 _addMarker方法后面加 /** * 销毁--（用户自定义) * @

百度地图使用之基本功能

孤云博客

08-29

4791

百度地图API学习总结

mmdev

03-21

513

一、百度地图API介绍 百度地图API是可以给开发人员调用的开放API，我们可以用Javascript语言进行调用；听起来API这个概念很抽象，初学者想：“百度的API，我们怎么能调用？”，其实不是这样，我们通过一个URL地址进行引用，然后就可以调用他的API；不需要Web服务器，只需要一个浏览器就能够使用百度地图API；二、调用API的基本文件格式以下为开发百度...

vue使用百度地图（BMap）去掉百度地图的标志。

hgy1329852351的博客

07-09

4733

在使用百度地图的文件，加上如下CSS标志即可： .BMap_cpyCtrl { display: none; } .anchorBL { display: none; } 如果在使用的文件加上面的代码不生效的话可以选择在App.vue文件里面加全局样式，这样子就生效了。 ...

百度地图类库聚合marker

04-29

在使用过程中，开发者需要引入百度地图API 1.2及相关MarkerClusterer库。接着，创建MarkerClusterer对象，传入地图实例和marker数组作为参数。以下是一个简单的示例： ```javascript // 引入百度地图API和...

百度开源代码路书（新增销毁功能）

06-24

百度地图巡航插件---新增销毁功能、包含开始、暂停、停止、和销毁

基于 React 封装的百度地图组件，帮助你轻松的接入地图到 React 项目中，支持 React Hook

最新发布

11-07

在这个案例中，“基于React封装的百度地图组件”就是这样一个组件，它将百度地图API的功能包装成符合React规范的组件，使得开发者可以在React应用中像使用其他React组件一样使用地图功能。接下来，我们要讨论React...

百度地图显示多个标注点

04-18

首先，我们需要在HTML页面中创建一个div元素作为地图的容器，设置其宽度和高度，然后通过JavaScript引入百度地图API库并初始化地图，指定容器ID和中心点坐标。 3. **创建标注点（Marker）**： 百度地图API中的...

jQuery百度地图单点标注代码.zip

07-04

1. **引入资源**：在网页中，你需要引入jQuery库和百度地图API的JavaScript文件。通常，jQuery库可以从CDN（内容分发网络）获取，而百度地图API的JavaScript文件则需要从百度服务器上加载。 2. **创建地图容器**：...

js如何清除百度地图api上的轨迹线路

weixin_40935738的博客

09-06

2834

map.clearOverlays();//清除地图上的所有标记

vue项目使用高德地图时报错：AMap is not defined

文龙刚的博客

12-06

4917

vue项目使用高德地图时报错：AMap is not defined

Vue 使用百度地图BMapGL内存泄漏问题，Out of Memory

潇似风的博客

05-08

2601

Vue 使用百度地图BMapGL内存泄漏问题，Out of Memory 在项目中使用了ElementUI 的 drawer 组件有地图操作，并开启了 :destroy-on-close=“true” 。开关多次以后浏览器崩溃了。刷新页面，打开任务管理器，复现刚刚的操作，会发现浏览器的内存占用一直在增加解决对象不定义在data中 initMap(){ map = new BMapGL.Map("allMap") // 创建Map实例 } 在vue中组件使用 v-if 指令

百度地图API踩坑（一）

m0_52719001的博客

06-01

1282

相信各位老哥之前已经看过了百度地图的官方文档，没有的建议去看一下，写本篇文章的目的是为了让各位想要学习使用百度地图API的兄弟们可以更加清楚明白的了解它要如何使用，结合本人之前的一些项目， ...

安卓：百度地图开发（超详细）

A125679880的博客

07-28

5261

百度地图SDK是一套供开发者使用的软件开发工具包（SDK），用于在Android应用程序中集成和使用百度地图功能。通过使用百度地图SDK，开发者可以实现在自己的应用中显示地图、获取定位信息、进行搜索、导航等功能。百度地图SDK提供了许多常用的类和方法，用于实现各种地图相关功能。是百度地图SDK提供的一个控件类，用于在应用程序的界面上显示地图。它是一个自定义的 View，可以与 BaiduMap 类关联，实现地图的显示和交互功能。

uniapp引入百度地图

07-27

要在UniApp中引入百度地图，你可以按照以下步骤进行操作： 1. 在百度地图开放平台上创建一个应用，获取到你的ak（Access Key）。确保你已经开通了地图API的权限。 2. 在UniApp项目中的`manifest.json`文件中，添加百度地图的插件。在`uni-app`节点下的`plugins`数组中添加以下代码： ```json "plugins": { "baidumap": { "version": "1.0.0", "provider": "wechat" } } ``` 3. 在需要使用百度地图的页面中，引入百度地图组件。可以在页面的`<template>`标签中添加以下代码： ```html <template> <view> <baidu-map style="width: 100%; height: 100%;" :ak="yourAk"></baidu-map> </view> </template> ``` 4. 在页面的`<script>`标签中，设置你的ak（Access Key）： ```javascript <script> export default { data() { return { yourAk: "your_ak_here" }; } }; </script> ``` 确保将"your_ak_here"替换为你在百度地图开放平台上获取到的ak。 5. 运行UniApp项目，在页面中就可以看到引入了百度地图的效果了。这样，你就成功地在UniApp中引入了百度地图。你可以根据自己的需求，进一步使用百度地图的相关功能。