这篇博客介绍了如何在React工程中使用原生高德地图API，包括引用`document.ejs`模板，并展示了集成高德地图3D热力图的实现过程，强调了需注意全局引用`window.AMap`以避免错误。
首先呢，先说下document.ejs，它是一个HTML模板库，在React中的主要作用是引用一些npm包不存在，而恰巧你又需要使用的库或插件。
接下来说一下使用高德地图原生API在React中使用，先看一下我的document.ejs的配置
ps:密钥用自己的哦，我就不贴出来了。[申请高德地图密钥](https://lbs.amap.com/api/android-sdk/guide/create-project/get-key)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title><%= context.title %></title>
<script type="text/javascript" src="http://webapi.amap.com/maps?key=%密钥%&v=1.4.7"></script>
<script type="text/javascript" src="http://webapi.amap.com/loca?key=%密钥%"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
React 中我的组件是这样写的；
ps：全程使用document.ejs文件做的引用未使用高德地图在React封装的npm包，切记要有window.AMap的引用，不然会全局报错。
import React from "react";
const AMap = window.AMap; //此处的引用document.ejs全局AMap对象，不做window事件是找不到的
export default class extends React.Component{
heatmapLoad = (map)=>{
//热力图
let heatmap;
map.plugin(["AMap.Heatmap"], function () {
//初始化heatmap对象
heatmap = new AMap.Heatmap(map, {
radius: 25, //给定半径
opacity: [0, 0.8]
});
//设置数据集：该数据为北京部分“公园”数据
heatmap.setDataSet({
data: data, //热力图数据
max: 100
});
});
};
componentDidMount() {
//此处获取Map的div元素使用的是id， 当然也是可以使用ref的形式
//ref获取div元素 ref={(ref)=>{this.mapBox = ref};} 此处写在div元素上
//DidMount获取 let {mapBox} = this 将new AMap 中 'mapBox' 引号去掉即可
let map = new AMap.Map('mapBox', {
//启动3D地图
zoom:11,//级别
center: [116.397428, 39.90923],//中心点坐标
pitch:50,
//rotation:-15,
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
});
this.heatmapLoad(map);
}
render() {
return <div>
<div id='mapBox' style={
{
width:'100%',height:'500px'}}/>
</div>
}
}
下面提供一组高德热力图的数据，贴到data处即可
let data = [{
"lng": 116.191031,
"lat": 39.988585,
"count": 10
}, {
"lng": 116.389275,
"lat": 39.925818,
"count": 11
}, {
"lng": 116.287444,
"lat": 39.810742,
"count": 12
}, {
"lng": 116.481707,
"lat": 39.940089,
"count": 13
}, {
"lng": 116.410588,
"lat": 39.880172,
"count": 14
}, {
"lng": 116.394816,
"lat": 39.91181,
"count": 15
}, {
"lng": 116.416002,
"lat": 39.952917,
"count": 16
}, {
"lng": 116.39671,
"lat": 39.924903,
"count": 17
}, {
"lng": 116.180816,
"lat": 39.957553,
"count": 18
}, {
"lng": 116.382035,
"lat": 39.874114,
"count": 19
}, {
"lng": 116.316648,
"lat": 39.914529,
"count": 20
}, {
"lng": 116.395803,
"lat": 39.908556,
"count": 21
}, {
"lng": 116.74553,
"lat": 39.875916,
"count": 22
}, {
"lng": 116.352289,
"lat": 39.916475,
"count": 23
}, {
"lng": 116.441548,
"lat": 39.878262,
"count": 24
}, {
"lng": 116.318947,
"lat": 39.942735,
"count": 25
}, {
"lng": 116.382585,
"lat": 39.941949,
"count": 26
}, {
"lng": 116.42042,
"lat": 39.884017,
"count": 27
}, {
"lng": 116.31744,
"lat": 39.892561,
"count": 28
}, {
"lng": 116.407059,
"lat": 39.912438,
"count": 29
}, {
"lng": 116.412351,
"lat": 39.888082,
"count": 30
}, {
"lng": 116.444341,
"lat": 39.915891,
"count": 31
}, {
"lng": 116.335385,
"lat": 39.741756,
"count": 32
}, {
"lng": 116.3926,
"lat": 40.008733,
"count": 33
}, {
"lng": 116.389731,
"lat": 39.92292,
"count": 34
}, {
"lng": 116.413371,
"lat": 39.874483,
"count": 35
}, {
"lng": 116.199752,
"lat": 39.911717,
"count": 36
}, {
"lng": 116.278472,
"lat": 40.254994,
"count": 37
}, {
"lng": 116.464252,
"lat": 39.925828,
"count": 38
}, {
"lng": 116.479475,
"lat": 39.937945,
"count": 39
}, {
"lng": 116.415599,
"lat": 39.956902,
"count": 40
}, {
"lng": 116.355675,
"lat": 39.870089,
"count": 41
}, {
"lng": 116.295267,
"lat": 39.987171,
"count": 42
}, {
"lng": 116.323634,
"lat": 39.911692,
"count": 43
}, {
"lng": 116.692769,
"lat": 40.173307,
"count": 44
}, {
"lng": 116.287888,
"lat": 39.928531,
"count": 45
}, {
"lng": 116.386502,
"lat": 39.922747,
"count": 46
}, {
"lng": 116.236773,
"lat": 40.218341,
"count": 47
}, {
"lng": 116.490636,
"lat": 39.804253,
"count": 48
}, {
"lng": 116.391095,
"lat": 39.925791,
"count": 49
}, {
"lng": 116.472402,
"lat": 39.769178,
"count": 50
}, {
"lng": 116.38657,
"lat": 39.956731,
"count": 51
}, {
"lng": 116.427536,
"lat": 39.943671,
"count": 52
}, {
"lng": 116.374547,
"lat": 39.967588,
"count": 53
}, {
"lng": 116.380383,
"lat": 39.871634,
"count": 54
}, {
"lng": 116.376092,
"lat": 39.965485,
"count": 55
}, {
"lng": 116.352424,
"lat": 39.91811,
"count": 56
}, {
"lng": 116.020157,
"lat": 40.348526,
"count": 57
}, {
"lng": 116.416201,
"lat": 39.951736,
"count": 58
}, {
"lng": 116.405392,
"lat": 39.908738,
"count": 59
}, {
"lng": 116.49238,
"lat": 39.926248,
"count": 60
}, {
"lng": 116.389282,
"lat": 39.988391,
"count": 61
}, {
"lng": 116.396683,
"lat": 39.923487,
"count": 62
}, {
"lng": 116.41718,
"lat": 39.905213,
"count": 63
}, {
"lng": 116.321512,
"lat": 39.913192,
"count": 64
}, {
"lng": 116.260028,
"lat": 40.03353,
"count": 65
}, {
"lng": 116.394846,
"lat": 39.911168,
"count": 66
}, {
"lng": 116.374767,
"lat": 39.96608,
"count": 67
}, {
"lng": 116.6841,
"lat": 39.909762,
"count": 68
}, {
"lng": 116.3838,
"lat": 39.95811,
"count": 69
}, {
"lng": 116.39243,
"lat": 40.01143,
"count": 70
}, {
"lng": 116.661912,
"lat": 40.121137,
"count": 71
}, {
"lng": 116.333056,
"lat": 39.90123,
"count": 72
}, {
"lng": 116.484839,
"lat": 39.881729,
"count": 73
}, {
"lng": 116.360923,
"lat": 39.935745,
"count": 74
}, {
"lng": 116.408531,
"lat": 39.953194,
"count": 75
}, {
"lng": 116.417916,
"lat": 39.954029,
"count": 76
}, {
"lng": 116.412215,
"lat": 39.992282,
"count": 77
}, {
"lng": 116.181532,
"lat": 40.048762,
"count": 78
}, {
"lng": 116.434848,
"lat": 40.070463,
"count": 79
}, {
"lng": 116.385039,
"lat": 39.956937,
"count": 80
}, {
"lng": 116.755067,
"lat": 39.854499,
"count": 81
}, {
"lng": 116.396061,
"lat": 39.912841,
"count": 82
}, {
"lng": 116.474303,
"lat": 39.971398,
"count": 83
}, {
"lng": 116.376262,
"lat": 39.85811,
"count": 84
}, {
"lng": 116.403783,
"lat": 39.954469,
"count": 85
}, {
"lng": 116.339136,
"lat": 39.729159,
"count": 86
}, {
"lng": 116.240159,
"lat": 39.947003,
"count": 87
}, {
"lng": 117.107541,
"lat": 40.141457,
"count": 88
}, {
"lng": 116.341813,
"lat": 40.078786,
"count": 89
}, {
"lng": 116.320648,
"lat": 39.706455,
"count": 90
}, {
"lng": 116.402566,
"lat": 39.960873,
"count": 91
}, {
"lng": 116.849261,
"lat": 40.402999,
"count": 92
}, {
"lng": 116.521064,
"lat": 39.834187,
"count": 
最低0.47元/天 解锁文章
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
