To achieve this effect, let's take a look at the current page display:
there is a legend on the left, we can zoom out the map in a way, and the dynamic marker mark is on the right. At that time, it will be the corresponding color identification, text display, and coordinate points at the back end. Back to us, we can definitely get a list. At this time, we can create marker nodes in a loop, and then add them to the map uniformly.
You can look at this part of the code first:
import React, {
Component } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
// 目前主要设置了地图的宽和高
import '../index.scss'
//为了方便直接使用了已有的base64编码的图片
import {
base64PNG,sanjiaoSVG,gray,red,green} from './base64png.js'
//小圆点下方的文字显示 以及样式
const content = `<div style="width:auto;padding:3px;background:gray;color:#000;border:none">EU126,租凭<br/>XX.XX MW</div>`
class MapComponent extends Component{
constructor(){
super();
this.map ={
};
this.AMap = null
this.state={
// 模拟后端返回的数据
datalist:[
{
icon:1,
position:[121.487899486,31.24916171],
title:'aaaaa',
zoom:3,
content,
},
{
icon:2,
position:[121.287899486,31.34916171],
title:'bbb',
zoom:3,
content,
},
{
icon:3,
position:[121.387899486,31.44916171],
title:'ccc',
zoom:3,
content,
},
{
icon:3,
position:[121.487899486,31.44916171],
title:'ddd',
zoom:3,
content,
},
{
icon:3,
position:[121.487899486,31.54916171],
title:'eee',
zoom:3,
content,
},
]
}
}
// 2.dom渲染成功后进行map对象的创建
componentDidMount(){
AMapLoader.reset() //需要把这个reset一下
AMapLoader.load({
key:"79d80321f75bf125cb18953d4c4b2f3a", // 申请好的Web端开发者Key，首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
console.log(AMap,'AMap')
//将map对象保存起来
this.AMap =AMap
this.renderMapFun()
}).catch(e=>{
console.log(e);
})
}
// 每次切换数据的时候单独调用即可
renderMapFun(){
this.map = new this.AMap.Map("container111",{
//设置地图容器id
// viewMode:"3D", //是否为3D地图模式
// zoom:5, //初始化地图级别
// center:[105.602725,37.076636], //初始化地图中心点位置
zoom: 10, //初始化地图级别
center: [121.487899486,31.24916171 ] //初始化地图中心点位置-上海
});
const obj = {
1:green,
2:red,
3:gray
}
let arr = []
//循环创建marker对象
this.state.datalist.map(i=>{
var marker1 = new AMap.Marker({
icon: obj[i.icon],
position: i.position,
title:i.title,
zoom:i.zoom,
});
marker1.setLabel({
content:i.content,
offset:new AMap.Pixel(-20,28)
})
arr = [...arr,marker1]
})
// 统计加入到map对象中绘制
this.map.add(arr);
}
render(){
// 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
return (
<div id="container111" className="map" >
</div>
);
}
}
//导出地图组建类
export default MapComponent;
Now to display the legend box on the left, we can use absolute positioning:
of course, a part of the style is also required.
#container111{
padding: 0px;
margin: 0px;
width: 100%;
height: 500px;
position: relative;
.leftBox{
width: 130px;
// height: 150px;
position: absolute;
top: 60px;
left: 30px;
z-index: 9999;
background-color: #fff;
padding: 10px 0 ;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.top{
font-size: 16px;
display: flex;
align-items: center;
height: 24px;
line-height: 24px;
border-bottom: 1px solid #aaa;
justify-content: space-around;
padding-left: 10px;
padding-bottom: 8px;
padding-right: 10px;
}
.bottom{
display: flex;
flex-direction: column;
.box{
width: 100%;
font-size: 14px;
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
padding-left: 20px;
// justify-content: center;
img{
width: 16px;
height: 16px;
margin-right: 8px;
}
}
}
}
}
The main thing is to realize the positioning of the father and the son to achieve the effect;
the page code:
import React, {
Component } from 'react';
import {
Icon } from '@alife/aisc';
import AMapLoader from '@amap/amap-jsapi-loader';
import '../index.scss';
import {
base64PNG, sanjiaoSVG, gray, red, green } from './base64png.js';
const content = `<div style="width:auto;padding:3px;background:gray;color:#000;border:none">EU126,租凭<br/>XX.XX MW</div>`;
class MapComponent extends Component {
constructor() {
super();
this.map = {
};
this.AMap = null;
this.state = {
zoom: 10,
datalist: [
{
icon: 1,
position: [121.487899486, 31.24916171],
title: 'aaaaa',
zoom: 3,
content,
},
{
icon: 2,
position: [121.287899486, 31.34916171],
title: 'bbb',
zoom: 3,
content,
},
{
icon: 3,
position: [121.387899486, 31.44916171],
title: 'ccc',
zoom: 3,
content,
},
{
icon: 3,
position: [121.487899486, 31.44916171],
title: 'ddd',
zoom: 3,
content,
},
{
icon: 3,
position: [121.487899486, 31.54916171],
title: 'eee',
zoom: 3,
content,
},
],
};
}
// 2.dom渲染成功后进行map对象的创建
componentDidMount() {
AMapLoader.reset(); //需要把这个reset一下
AMapLoader.load({
key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
console.log(AMap, 'AMap');
this.AMap = AMap;
this.renderMapFun();
// var circle = new AMap.Circle({
// center: new AMap.LngLat("121.487899486", "31.24916171"), // 圆心位置
// radius: 10000, //半径
// strokeColor: "#F33", //线颜色
// strokeOpacity: 1, //线透明度
// strokeWeight: 3, //线粗细度
// fillColor: "#ee2200", //填充颜色
// fillOpacity: 0.35 //填充透明度
// });
// this.map.add([marker1,marker2,marker3]);
// this.map.add([marker1,marker2,marker3,circle]);
// this.map.add(marker);
})
.catch((e) => {
console.log(e);
});
}
renderMapFun() {
this.map = new this.AMap.Map('container111', {
//设置地图容器id
// viewMode:"3D", //是否为3D地图模式
// zoom:5, //初始化地图级别
// center:[105.602725,37.076636], //初始化地图中心点位置
zoom: this.state.zoom, //初始化地图级别
center: [121.487899486, 31.24916171], //初始化地图中心点位置-上海
});
const obj = {
1: green,
2: red,
3: gray,
};
let arr = [];
this.state.datalist.map((i) => {
var marker1 = new AMap.Marker({
icon: obj[i.icon],
position: i.position,
title: i.title,
zoom: i.zoom,
});
marker1.setLabel({
content: i.content,
offset: new AMap.Pixel(-20, 28),
});
arr = [...arr, marker1];
});
this.map.add(arr);
}
addFun=()=>{
// console.log(this.map,'this.map')
const {
zoom} = this.state
if(zoom!==18){
this.setState({
zoom:zoom+1
},()=>{
// 设置地图显示的缩放级别，在PC上，参数zoom可设范围：[3,18]；
// 在移动端：参数zoom可设范围：[3,19]。3D地图下，可将zoom设置为浮点数。/
this.map.setZoom(this.state.zoom)
// this.renderMapFun()
})
}
}
downFun=()=>{
const {
zoom} = this.state
if(zoom!==3){
this.setState({
zoom:zoom-1
},()=>{
this.map.setZoom(this.state.zoom)
// this.renderMapFun()
})
}
}
render() {
// 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
return (
<div style={
{
width: '100%', height: '100%' }}>
<div id="container111" className="map">
<div className="leftBox">
<div className="top">
<Icon type="add" onClick={
this.addFun}/>
{
this.state.zoom} <Icon type="minus" onClick={
this.downFun}/>
</div>
<div className="bottom">
<div className="box">
<img src={
gray} alt="" />
预计裁撤
</div>
<div className="box">
<img src={
red} alt="" />
建设中
</div>
<div className="box">
<img src={
green} alt="" />
预计保留
</div>
</div>
</div>
</div>
</div>
);
}
}
//导出地图组建类
export default MapComponent;
We want to click on the + on the left to zoom in; - to zoom out;
then check the relevant documents, which are explained in the official documents:
setZoom: Set the zoom level of the map display. On the PC, the parameter zoom can set the range: [3,18]; on the mobile terminal: the parameter zoom can set the range: [3,19]. In 3D maps, zoom can be set as a floating point number.
It means that we can only use the zoom in and out range of 3 - 18 in the PC,
so we need to control the maximum value when we click the button to zoom in and out:
addFun=()=>{
// console.log(this.map,'this.map')
const {
zoom} = this.state
if(zoom!==18){
this.setState({
zoom:zoom+1
},()=>{
// 设置地图显示的缩放级别，在PC上，参数zoom可设范围：[3,18]；
// 在移动端：参数zoom可设范围：[3,19]。3D地图下，可将zoom设置为浮点数。/
this.map.setZoom(this.state.zoom)
// this.renderMapFun()
})
}
}
downFun=()=>{
const {
zoom} = this.state
if(zoom!==3){
this.setState({
zoom:zoom-1
},()=>{
this.map.setZoom(this.state.zoom)
// this.renderMapFun()
})
}
}
Also present the official link:
https://lbs.amap.com/api/javascript-api/guide/map/state
https://lbs.amap.com/demo/javascript-api/example/map/click-to- get-lnglat
https://lbs.amap.com/demo/javascript-api/example/map/get-mapzoom