有个需求是要标注点随地图缩放等级变化大小,所以就想着使用高德地图API里的ElasticMarker,但是结果无法在地图上显示
使用Marker就可以正常显示。
求各位帮我看看问题出在哪了
代码如下:
import { Component } from 'react';
import './MapPage.css';
import AMapLoader from '@amap/amap-jsapi-loader';
class MapPage extends Component {
constructor(props: any) {
super(props);
this.state = {
map: {},
};
this.map = {};
}
componentDidMount() {
AMapLoader.load({
key: 'c9ea62b51d53c7f76a8ecaca52dfb814',
version: '2.0',
plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.MapType', 'AMap.ElasticMarker'],
AMapUI: {
version: '1.1',
plugins: [],
},
Loca: {
version: '2.0.0',
},
})
.then((AMap) => {
this.map = new AMap.Map('container', {
viewMode: '3D',
zoom: 5,
zooms: [2, 22],
center: [105.602725, 37.076636],
});
this.map.addControl(new AMap.MapType({ defaultType: 0 }));
let facilities = [];
let positionArr = [
[113.357224, 34.977186],
[114.555528, 37.727903],
[112.106257, 36.962733],
[109.830097, 31.859027],
[116.449181, 39.98614],
];
for (let item of positionArr) {
let marker = new AMap.ElasticMarker({
// map: this.map,
position: [item[0], item[1]],
zooms: [2, 22],
styles: [
{
icon: {
img: '../../assets/img/point1-0.jpg',
size: [60, 60],
ancher: 'bottom-center',
fitZoom: 14,
scaleFactor: 2,
maxScale: 1.4,
minScale: 0.8,
},
},
],
});
facilities.push(marker);
// console.log(facilities);
this.map.add(facilities);
}
})
.catch((e) => {
console.log(e);
});
}
render() {
return <div id="container" style={{ width: '1278px', height: '580px', margin: '-24px' }} />;
}
}
export default MapPage;