をクリックすると、スクリプト内で導入された BMap オブジェクトを使用して、さまざまな API を呼び出すことができます。 遭遇した問題: 私はエントリーファイル——index.htにいます"/> をクリックすると、スクリプト内で導入された BMap オブジェクトを使用して、さまざまな API を呼び出すことができます。 遭遇した問題: 私はエントリーファイル——index.htにいます">
ホームページ > 記事 > ウェブフロントエンド > React フレームワークが Baidu Maps に適合した場合はどうすればよいですか?
/*剩下的部分自己想象*/<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=我的的秘钥"></script>/*剩下的部分自己想象*/
import React from 'react' class Test extends React.Component{ componentDidMount () { var map = new BMap.Map("allmap") } render () {return (<div id='allmap'></div>) } }
<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 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') )
module.exports = {/*此处省略了entry,output,modules等配置*/ externals:{ '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') )
render () { var map = new BMap.Map("allmap"); // 创建Map实例 return (<div id='allmap' />) ) }
class BaiduMap extends React.Component { componentDidMount () { var map = new BMap.Map("allmap"); // 创建Map实例} render () { return <div id='allmap' /> ) }
render () {return <div id='allmap' style={{width:'100%',height:'100px'}} /> }
以上がReact フレームワークが Baidu Maps に適合した場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。