Que dois-je faire si le framework React répond à Baidu Maps ?

Le guide d'utilisation du document officiel de Baidu Maps dit ceci : Introduisez , vous pouvez alors utiliser l'objet BMap introduit dans le script pour appeler diverses API

Les problèmes que j'ai rencontrés :

Après avoir introduit le script ci-dessus dans le fichier d'entrée - index.html, lorsque j'ai accédé à BMap dans un autre fichier JS, une erreur a été signalée, indiquant que BMap n'est pas défini,

Ma façon de résoudre le problème :

1. Allez sur github Find. s'il existe un SDK open source (s'il existe, installez le package de dépendances via npm install, puis je peux introduire BMap via require ou import) ——Échec, il n'y a aucun package de dépendances open source

2. Introduisez directement l'adresse http via require ou import, comme require('http..../*L'adresse du script ci-dessus*/') —— L'échec, l'exigence ou l'importation ne peuvent directement introduire des fichiers de ressources locales, et ne peuvent pas directement introduire des externes

3. Liez BMap à l'objet Window pour obtenir un accès inter-fichiers - succès ! (Il peut être implémenté mais non recommandé, implémenté dans un souci d'implémentation)

4. L'accès est requis via l'attribut externals dans l'objet de sortie du webpack . - Succès ! (Pratique recommandée)

Reproduire le problème :

Mon répertoire :

Mon index.html ressemble à ceci :

/*剩下的部分自己想象*/<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=我的的秘钥"></script>/*剩下的部分自己想象*/

Mon test/index.js ressemble à ceci :

import React from 'react'
 class Test extends React.Component{
componentDidMount () {   var map = new BMap.Map("allmap")
}
render () {return (<div id=&#39;allmap&#39;></div>)   }
}

Cependant, une erreur a été signalée lors du rendu Test :

Un fait est sous nos yeux :

Lors de la construction d'une application de manière modulaire, les variables du fichier d'entrée ne sont pas directement accessibles dans le module JS. Alors, comment importer les variables du fichier HTML d'entrée dans un fichier JS ?

Ou dans cet exemple, comment peut-on obtenir l'objet BMap dans le script introduit en HTML dans test/index.js ?

Peut-être que de nombreux étudiants penseront : utilisez simplement l'exportation/l'importation ! Mais exporter des variables directement dans des fichiers HTML n'est évidemment pas une approche raisonnable

Méthode 1 : Enregistrer BMap avec les variables de l'objet Window, réaliser le transfert de variables entre les fichiers HTML et les fichiers JS  :

在引入百度地图的脚本下再加入这一段脚本：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eBGR7XzaPhB5UbYARl3E7ksdkMdgrCw7"></script>
<script> window.BMap = BMap</script>

 

没错，就是把BMap对象保存到全局可访问的window对象中

当要使用BMap的时候这样用：

 BMap = window.BMap map =  BMap.Map("allmap");

例子如下：

import React from 'react'import ReactDOM from 'react-dom'class BaiduMap extends React.Component {
 
componentDidMount () {  var BMap = window.BMap  var map = new BMap.Map("allmap"); // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设    置中心点坐标和地图级别
  map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
  map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放}
 
render () {  return (<div>
    <div
      id=&#39;allmap&#39;  style={{
        width:&#39;100vw&#39;,
        height:&#39;100vh&#39;  }} />
</div>    )
  }
}
ReactDOM.render(<BaiduMap />,
document.getElementById('root')
)

 

demo:

 

 

 

方法二.通过webpack的externals加载BMap使它可以通过require或import引入

在webpack.config.js中

module.exports = {/*此处省略了entry，output,modules等配置*/
  externals:{    'BMap':'BMap'
  },
}

在使用到BMap的时候，这样引入：

import BMap from 'BMap'var map = new BMap.Map("allmap"); // 创建Map实例//通过map调用API

例子：

import React from 'react'import ReactDOM from 'react-dom'import BMap from 'BMap'class BaiduMap extends React.Component {
 
componentDidMount () {  var map = new BMap.Map("allmap"); // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
  map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
  map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放}
 
render () {  return (<div>
      <div
        id=&#39;allmap&#39;style={{
          width:&#39;100vw&#39;,
          height:&#39;100vh&#39; }} />
    </div>       )
       }
}
ReactDOM.render(  <BaiduMap />,
  document.getElementById('root')
)

 

webpack的externals的具体作用我概括为两点：

1.写入externals中的依赖是不会被打包进最后的bundle里面的

2.虽然它不会被打包，但在程序运行的时候你仍然能通过模块化的方式去引入这些依赖，如commonJS,AMD,ES6的import等

（原文：Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.）

 

demo同上：

 

百度地图新手（尤其是用react的）容易犯的错误及其解决方式：

1.忘记写

这个元素(id不一定要是allmap,只要和 new BMap.map（参数）里的字符串参数相同便可)

然后控制台就会报：TypeError: Cannot read property 'gc' of undefined的错误

解决方法：记得写

 

2.你写入了

，但还是报了TypeError: Cannot read property 'gc' of undefined的错误，你可能犯了一个原生JS码农不太可能会犯但是react码农可能会犯的错误：你在

渲染前就执行了 var map = new BMap.Map("allmap");这一行代码

例如：

render () {   var map = new BMap.Map("allmap"); // 创建Map实例
   return (<div id=&#39;allmap&#39; />) )
}

 

解决办法：在渲染

后才执行var map = new BMap.Map("allmap"); 例如将初始化map的代码放入组件类的

componentDidMount （）钩子函数中（这个函数将在组件被初次渲染完毕后调用）

例如：

class BaiduMap extends React.Component {
componentDidMount () {    var map = new BMap.Map("allmap"); // 创建Map实例}
render () {    return <div id=&#39;allmap&#39; /> )
}

3.你写入了

，控制台也没有报错，但是你就是看！不！到！地！图！

这多半是你没有给

加上宽高，百度地图的API是不会给你的div加宽高的，所以height默认是0就是0

解决方法：给目标地图div加上宽高（严格地说是高，宽默认为width:auto）

render () {return <div id=&#39;allmap&#39; style={{width:&#39;100%&#39;,height:&#39;100px&#39;}} />
}

 

为此，我写了一封反馈的信件给百度地图的工作者们，目前在等待回应中（希望能有所回应吧）

 

以下为详细内容：

 

亲爱的百度地图开发者您好，作为一名react框架开发者，我在入门百度地图API时遇到困难——我不知道如何在模块化JS中使用BMap的API（问题现已解决）。因为你们只提供了原生JS下的入门指导，而没有任何关于模块化JS编程下的指导内容。这对于一些框架新手来说确实有些难以下手

 

我遇到的问题是：在引入携带AK的script的前提下，在一个JS模块文件（不是入口文件）中使用BMap报错："error! BMap is not defined!"

 

我的解决法是通过在Webpack输出对象中的externals属性中加入BMap:"BMap"，然后通过在对后在对应的JS页面中通过Window.BMap取得。

 

希望你们能够提供更为详细的操作指导，例如webpack下BMap的用法。这将让你们的产品变得更好。

 

以上 —— 某个爱好javaScript的大二学生

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn