二、前端高德地图、渲染标记(Marker)引入自定义icon，手动设置zoom

要实现这个效果，我们先看一下目前的页面展示：

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

可以先看这部分代码：

javascript 复制代码

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;

现在要显示左侧的图例盒子，我们使用绝对定位即可：

当然也是需要一部分的样式的。

css 复制代码

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

主要就是实现父绝子相定位实现了效果；

页面代码：

javascript 复制代码

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;

我们想实现点击左侧的 + 来实现放大； - 实现缩小；

后来查询相关文档，官方文档上解释：

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

意思是说我们在PC中使用只能使用的放大缩小范围为 3 - 18

所以我们在点击按钮的时候放大缩小就需要控制最大值：

javascript 复制代码

  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()
        })
    }
  }

另外献上官方连接：
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