左边有一个图例，我们可以方法缩小地图，右边是动态的marker标记，到时候肯定时候是后端将对应的颜色标识、文字展示、坐标点给咱们返回、我们肯定可以拿到一个list，这个时候我们可以循环创建marker节点，然后统一增加到map中。
可以先看这部分代码：

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;
现在要显示左侧的图例盒子，我们使用绝对定位即可：
当然也是需要一部分的样式的。

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;
    }
  }
}

}
}
主要就是实现父绝子相定位实现了效果；
页面代码：

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%' }}>

{
this.state.zoom}

xxxx

);
}
}
//导出地图组建类
export default MapComponent;
我们想实现点击左侧的 + 来实现放大； - 实现缩小；
在这里插入图片描述

后来查询相关文档，官方文档上解释：
在这里插入图片描述

setZoom：设置地图显示的缩放级别，在PC上，参数zoom可设范围：[3,18]；在移动端：参数zoom可设范围：[3,19]。3D地图下，可将zoom设置为浮点数。

意思是说我们在PC中使用只能使用的放大缩小范围为 3 - 18
所以我们在点击按钮的时候放大缩小就需要控制最大值：

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设置为浮点数。/

//代码效果参考：https://www.uagu.cn/sitemap/post.xml
//代码效果参考：https://www.szworkshop.com.cn/sitemap/post.xml
//代码效果参考：http://www.603393.com/sitemap/post.xml
//代码效果参考：https://www.weibow.com/sitemap/post.xml
//代码效果参考：https://www.xx-ph.com/sitemap/post.xml
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()
    })
}

}

文字展示、坐标点给咱们返回

container111{

热门文章

最新文章

相关电子书