1、使用react-create-app創建一個新的react項目

2、修改index.html，添加以下script引用：

3、創建一個組件文件MapDemo.js，內容如下

import React, { Component } from "react";

class WebMapDemo extends Component {

constructor(props) {

super(props);

}

componentDidMount(){

var map = new AMap.Map('container', {

viewMode: '3D',

pitch: 50,

zoom: 11,

center: [116.480766, 39.932931]

});

// 設置光照

map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);

map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);

var object3Dlayer = new AMap.Object3DLayer();

map.add(object3Dlayer);

new AMap.DistrictSearch({

subdistrict: 0, //返回下一級行政區

extensions: 'all', //返回行政區邊界坐標組等具體信息

level: 'city' //查詢行政級別為 市

}).search('朝陽區', function (status, result) {

var bounds = result.districtList[0].boundaries;

var height = 5000;

var color = '#0088ffcc'; // rgba

var prism = new AMap.Object3D.Prism({

path: bounds,

height: height,

color: color

});

prism.transparent = true;

object3Dlayer.add(prism);

var text = new AMap.Text({

text: result.districtList[0].name + '(' + result.districtList[0].adcode + ')',

verticalAlign: 'bottom',

position: [116.528261, 39.934313],

height: 5000,

style: {

'background-color': 'transparent',

'-webkit-text-stroke': 'red',

'-webkit-text-stroke-width': '0.5px',

'text-align': 'center',

'border': 'none',

'color': 'white',

'font-size': '24px',

'font-weight': 600

}

});

text.setMap(map);

});

}

render() {

return (

);

}

}

export default WebMapDemo;

注意AMap類不是react中定義的類，會在運行時報錯，因此需要參考我的另一篇隨筆 《配合react-amap使用原生高德地圖》， 將AMap類排除在eslint語法檢查之外。

4、編寫index.js，加載在3里編寫的這個地圖組件

import React from "react";

import ReactDOM from "react-dom";

import Map from "./MapDemo";

ReactDOM.render(

document.getElementById("root")

);

5、執行 npm start運行項目：

完工。

6 說明

為了講清邏輯， 地圖的創建和操作都寫在了componentDidMount里面。各位自行進行性能優化。

總結

以上是生活随笔為你收集整理的react 逆地理 高德地图_在react中使用原生的高德地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。