React 프레임워크가 Baidu Maps를 충족한다면 어떻게 해야 하나요?

Baidu 지도 공식 문서의 사용 지침에는 다음과 같이 나와 있습니다. 소개 그러면 스크립트에 소개된 BMap 객체를 사용하여 다양한 API를 호출할 수 있습니다

문제 발생:

항목 파일(index.html)에 위 스크립트를 도입한 후 다른 JS 파일에서 BMap에 액세스하면 오류가 보고되고 BMap이 정의되지 않았습니다.

My ideas for 문제 해결:

1. github에 가서 오픈 소스 SDK가 있는지 확인하세요. (있는 경우 npm 설치를 통해 종속성 패키지를 설치한 다음 요구하거나 가져올 수 있습니다.) BMap이 도입됩니다. ——실패. 오픈소스 종속성 패키지가 전혀 없습니다

2. require('http..../*위 스크립트의 주소* / ') - 실패, 요구 또는 가져오기는 직접 로컬 리소스 파일을 도입할 수만 있고 직접 외부

도입은 불가능합니다. 3. BMap을 Window 개체에 바인딩하여 파일 간 방문을 달성합니다. 성공적인! (구현 가능하지만 권장하지 않음, 구현을 위해 구현)

4. webpack 출력 객체의 externals 속성을 통해 접근 요구 구현——성공! (권장 연습)

문제 재현:

내 디렉터리:

My index.html 다음과 같습니다:

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

내 test/index.js는 다음과 같습니다:

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

그러나 테스트를 렌더링할 때 오류가 보고되었습니다.

사실은 앞 of me :

모듈 방식으로 애플리케이션을 구축할 때 JS 모듈에서 항목 파일의 변수에 직접 액세스할 수 없습니다. 그렇다면 항목 HTML 파일의 변수를 JS 파일로 어떻게 가져오나요? ?

아니면 이 예에서 test/index.js의 HTML에 도입된 스크립트에서 BMap 개체를 어떻게 얻을 수 있습니까?

아마 많은 학생들이 이렇게 생각할 것입니다: 그냥 내보내기/가져오기를 사용하세요! 하지만 변수를 HTML 파일로 직접 내보내는 것은 분명히 합리적인 접근 방식이 아닙니다

방법 1: Window 개체를 사용하여 BMap 변수를 저장하여 HTML 파일과 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的大二学生

 

위 내용은 React 프레임워크가 Baidu Maps를 충족한다면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.