在react中使用原生的高德地图
<p>1、使用react-create-app创建一个新的react项目</p><p>2、修改index.html，添加以下script引用：</p>
<p><img src="https://img2018.cnblogs.com/blog/593917/201906/593917-20190628184242843-905900349.png" alt=""></p>
<p> </p>
<p>3、创建一个组件文件MapDemo.js，内容如下</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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:
});
// 设置光照
map.AmbientLight = new AMap.Lights.AmbientLight(, 0.5);
map.DirectionLight = new AMap.Lights.DirectionLight(, , 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.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.name + '</br>(' + result.districtList.adcode + ')',
verticalAlign: 'bottom',
position: ,
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 (
<div id="container" style ={{width:"100%",height:"95%"}}>
</div>
);
}
}
export default WebMapDemo;
</pre>
</div>
<p>注意AMap类不是react中定义的类，会在运行时报错，因此需要参考我的另一篇随笔 《配合react-amap使用原生高德地图》， 将AMap类排除在eslint语法检查之外。</p>
<p> </p>
<p>4、编写index.js，加载在3里编写的这个地图组件</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import React from "react";
import ReactDOM from "react-dom";
import Map from "./MapDemo";
ReactDOM.render(
<div style ={{width:"100%",height:"100%"}}>
<Map />
</div>,
document.getElementById("root")
);
</pre>
</div>
<p> </p>
<p>5、执行 npm start运行项目：</p>
<p><img src="https://img2018.cnblogs.com/blog/593917/201906/593917-20190628183356717-123712747.png" alt=""></p>
<p>完工。</p>
<p> </p>
<p>6 说明</p>
<p>为了讲清逻辑， 地图的创建和操作都写在了componentDidMount里面。各位自行进行性能优化。</p><br><br>
来源：https://www.cnblogs.com/zjw0901/p/11104292.html
頁:
[1]