react中使用高德地圖的原生API

張瘋牛發表於2019-06-28
React地圖API

乾貨，無話

 

1、react-create-app，建立新react專案；

2、npm install react-amap，引入高德地圖的封裝；

3、編寫元件index.js：

import React from "react";
import ReactDOM from "react-dom";
import Map from "./Map3";

let mapData = {
    city: "北京",
    mapCenter:[116.418261, 39.921984],  //城市定位，經緯度定位只能選擇1個
    mapZoom: 10, //地圖縮放
    mapKey: '12345678d98aff1166e51962f108bb24',   //你的高德key
    status: { //是否支援放大拖拽
        zoomEnable: true,
        dragEnable: true,
    },
    mapMaker :[  //marker標記點(list)
        {lnglat:[116.401728,39.911984],text:'要顯示的內容1'},
        {lnglat:[116.436691,39.921984],text:'要顯示的內容2'}
    ],
    plugins:['ToolBar']
};

ReactDOM.render(
    <div style ={{width:"100%",height:"100%"}}>    
        <Map title="map" mapData={mapData}/>
    </div>,

    document.getElementById("root")
);

　　注意render方法內引用了Map元件，因此要編寫一個Map3.js，提供這個元件

4、編寫Map3.js元件

import React, { Component } from "react";
import { Map, Marker } from 'react-amap';
import ZoomCtrl from './zoom';

class WebMap3 extends Component {
    constructor(props) {
        super(props);
        this.data = props;
        //地圖事件
        this.amapEvents = {
            created: (mapInstance) => {
                var marker = new AMap.Marker({
                    // 經緯度物件，也可以是經緯度構成的一維陣列[116.39, 39.9]
                    position: new AMap.LngLat(116.39, 39.9), 
                    title: '北京!!'
                });
                
                mapInstance.add(marker);
            }
        };

        //點位事件
        this.markerEvents = {
            click: (markerInstance) => {
                this.Position = [markerInstance.lnglat.lng,markerInstance.lnglat.lat];
                this.setState({
                    isShow: true,
                });
            }
        };
    }

    render() {
        let {city, mapCenter,  mapZoom, mapKey, status, plugins} = this.data.mapData;
        return (
            <div style ={{width:"100%",height:"95%"}}>
            <Map amapkey={mapKey} city={city} zoom={mapZoom} center={mapCenter} status={status} plugins={plugins} events={this.amapEvents}>
                {this.data.mapData.mapMaker.map((comment) => (
                    <Marker position={comment.lnglat} events={this.markerEvents}>
                    </Marker>
                ))}
                <ZoomCtrl />
            </Map>
            </div>
        );
    }

}

export default WebMap3;

　　注意標紅部分，會報錯

這個是關鍵！ 有兩個辦法解決，分別見下面的5.1和5.2

 

5、解決react下找不到原生高德地圖AMap類的問題

5.1 方法1

暴力手段，直接搞定。

使用註釋    //eslint-disable-next-line  寫在每個出現AMap類的前面一行，如下所示

原理是告訴eslint：註釋下面這一行您別管。

 5.2 方法2

強迫症手段，分為3步。

5.1.1 在專案根目錄下新加.eslintrc.js檔案，把AMap變數放到globals集合裡面

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    // 指令碼在執行期間訪問的額外的全域性變數
    // 當訪問未定義的變數時，no-undef 規則將發出警告。
    // 如果你想在一個檔案裡使用全域性變數，推薦你定義這些全域性變數，這樣 ESLint 就不會發出警告了。
    // 你可以使用註釋或在配置檔案中定義全域性變數
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "AMap":true,
        "window":true,
        "document":true,
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "semi": ["error","always"],
    }
};　　

注意紅色部分程式碼表示：AMap是個全域性變數，是webpack我罩著的，保證能用，eslint你別管。

當然，webpack.config.js要做點修改，以支援我們剛寫的.eslintrc.js檔案。可是react-create-app生成的專案的webpack.config.js不好找啊，也能找到：

5.2.2 修改 node_modules\react-scripts\config\webpack.config.js檔案

在這個檔案搜尋字串 useEslintrc， 大概在webpack.config.js檔案的第326行，把 useEslintrc: false,  改成 useEslintrc: true, 然後儲存。如下所示：

5.2.3 完工

 呃

 

6 驗收

在控制檯執行npm start，然後訪問http://localhost:3000，出現下圖表示OK！

 

7 總結

此方法適用於在react中呼叫jquery、百度地圖、高德地圖、OpenLayer、echart等等使用ES5編寫的各類控制元件庫。

相關文章