忧伤的王尓德 2022-08-11 01:22 采纳率: 33.3%
浏览 130
已结题

高德地图灵活的点ElasticMarker在react的使用

有个需求是要标注点随地图缩放等级变化大小,所以就想着使用高德地图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;

展开全部

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-08-11 01:34
    关注

    你map 怎么给注释了 。这个是显示的地图对象没有这个 应该显示不了吧

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 8月18日
  • 已采纳回答 8月11日
  • 创建了问题 8月11日

悬赏问题

  • ¥15 MATLAB解决问题
  • ¥20 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目