Was soll ich tun, wenn das Reaktionsframework Baidu Maps erfüllt?

In der Nutzungsanleitung des offiziellen Dokuments von Baidu Maps heißt es: Fügen Sie <script type="text/javascript" src=" in die Seite http ein ://api.map.baidu.com/api?v=2.0&ak=Der geheime Schlüssel, den Sie erhalten haben"></script>, dann können Sie das im Skript eingeführte BMap-Objekt verwenden, um verschiedene APIs aufzurufen

Die Probleme, auf die ich gestoßen bin:

Nachdem ich das obige Skript in die Eintragsdatei index.html eingefügt hatte, wurde beim Zugriff auf BMap in einer anderen JS-Datei ein Fehler gemeldet, der darauf hinwies, dass BMap nicht definiert ist,

Mein Weg, das Problem zu lösen:

1. Gehen Sie zu Github Find Finden Sie heraus, ob es ein Open-Source-SDK gibt (falls vorhanden, installieren Sie das Abhängigkeitspaket über npm install, und dann kann ich BMap über require oder import einführen) ——Fehlgeschlagen, es gibt überhaupt kein Open-Source-Abhängigkeitspaket

2. Geben Sie die http-Adresse direkt über require oder import ein, z. B. require('http..../*Die Adresse des obigen Skripts*/') —— Fehler, Anforderung oder Import können nur direkt lokale Ressourcendateien einführen und nicht direkt externe einführen

3. Binden Sie BMap an das Window-Objekt, um einen dateiübergreifenden Zugriff zu erreichen – Erfolg! (Es kann implementiert werden, wird aber nicht empfohlen, implementiert aus Gründen der Implementierung)

4. Der Zugriff ist über das Externals-Attribut im Webpack-Ausgabeobjekt erforderlich - Erfolg ! (Empfohlene Vorgehensweise)

Reproduzieren Sie das Problem:

Mein Verzeichnis:

Mein index.html sieht so aus:

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

Mein test/index.js sieht so aus:

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

Beim Rendern des Tests wurde jedoch ein Fehler gemeldet:

Eine Tatsache liegt vor unseren Augen:

Beim modularen Aufbau einer Anwendung kann im JS-Modul nicht direkt auf die Variablen in der Eintragsdatei zugegriffen werden. Wie importieren wir also die Variablen in der HTML-Eingabedatei in eine JS-Datei?

Oder wie können wir in diesem Beispiel das BMap-Objekt im in HTML in test/index.js eingeführten Skript erhalten?

Vielleicht denken viele Studierende: Einfach Export/Import nutzen! Aber das Exportieren von Variablen direkt in HTML-Dateien ist offensichtlich kein sinnvoller Ansatz

Methode 1: BMap mit Fensterobjektvariablen speichern, Realisierung der variablen Übertragung zwischen HTML-Dateien und JS-Dateien :

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

<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='allmap'  style={{
        width:'100vw',
        height:'100vh'  }} />
</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='allmap'style={{
          width:'100vw',
          height:'100vh' }} />
    </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.忘记写<div id= 'allmap'></div>这个元素(id不一定要是allmap,只要和 new BMap.map（参数）里的字符串参数相同便可)

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

解决方法：记得写<div id= 'XXXX'></div>

 

2.你写入了<div id= 'allmap'></div>，但还是报了TypeError: Cannot read property 'gc' of undefined的错误，你可能犯了一个原生JS码农不太可能会犯但是react码农可能会犯的错误：你在<div id= 'allmap'></div>渲染前就执行了 var map = new BMap.Map("allmap");这一行代码

例如：

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

 

解决办法：在渲染<div id='allmap' />后才执行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='allmap' /> )
}

3.你写入了<div id= 'allmap'></div>，控制台也没有报错，但是你就是看！不！到！地！图！

这多半是你没有给<div id= 'allmap'></div>加上宽高，百度地图的API是不会给你的div加宽高的，所以height默认是0就是0

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

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

 

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

 

以下为详细内容：

 

亲爱的百度地图开发者您好，作为一名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的大二学生

 

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Reaktionsframework Baidu Maps erfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!