You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.6 KiB
50 lines
1.6 KiB
import React, { useEffect, useState } from 'react';
|
|
|
|
let map = '';
|
|
const Amap = (props) => {
|
|
const [mapComplete, setMapComplete] = useState(false);
|
|
|
|
useEffect(() => {
|
|
drawMap();
|
|
}, []);
|
|
const drawMap = () => {
|
|
try {
|
|
if (AMap) loadMap();
|
|
} catch (e) {
|
|
var script = document.createElement("script");
|
|
script.src = "https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch";
|
|
document.body.appendChild(script);
|
|
loadMap();
|
|
}
|
|
}
|
|
|
|
const loadMap = () => {
|
|
map = new AMap.Map("amapId", {
|
|
resizeEnable: true,
|
|
center: [115.934544, 28.664365], // 地图中心点，初始定位加载显示楼块
|
|
// center: [115.857952, 28.683003],// 地图中心点
|
|
zoom: 14, // 地图显示的缩放级别
|
|
zooms: [3, 20],
|
|
pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
|
|
viewMode: '3D', // 地图模式
|
|
// rotation: 60
|
|
// showLabel: false
|
|
});
|
|
// 主题样式
|
|
map.setMapStyle("amap://styles/fb26776387242721c2fc32e2cb1daccc");
|
|
|
|
map.on('complete', function () {
|
|
console.log("map-complete")
|
|
setMapComplete(true);
|
|
});
|
|
window.onload = function () {
|
|
console.log("window.onload")
|
|
}
|
|
};
|
|
|
|
return <div style={{ width: '100%', height: '100%', }}>
|
|
<div id='amapId' style={{ width: '100%', height: '100%', background: "#101824" }} />
|
|
</div>
|
|
}
|
|
|
|
export default Amap;
|