@uiw/react-amap-marker v7.1.3

Marker 点标记组件

点标记是用来标示某个位置点信息的一种地图要素，本章介绍如何在地图图面使用点标记。

import { Marker } from '@uiw/react-amap';
// 或者单独安装使用
import { Marker } from '@uiw/react-amap-marker';

基本用法

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, Marker } from '@uiw/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map zoom={4}>
          <Marker visible={show} title="北京市" position={new AMap.LngLat(116.405285,39.904989)} />
          <Marker visible={show} title="天津市" position={new AMap.LngLat(117.190182,39.125596)} />
          <Marker visible={show} title="河北省" position={new AMap.LngLat(114.502461,38.045474)} />
          <Marker visible={show} title="山西省" position={new AMap.LngLat(112.549248,37.857014)} />
          <Marker visible={show} title="内蒙古自治区" position={new AMap.LngLat(111.670801,40.818311)} />
          <Marker visible={show} title="辽宁省" position={new AMap.LngLat(123.429096,41.796767)} />
          <Marker visible={show} title="吉林省" position={new AMap.LngLat(125.3245,43.886841)} />
          <Marker visible={show} title="黑龙江省" position={new AMap.LngLat(126.642464,45.756967)} />
          <Marker visible={show} title="上海市" position={new AMap.LngLat(121.472644,31.231706)} />
          <Marker visible={show} title="江苏省" position={new AMap.LngLat(118.767413,32.041544)} />
          <Marker visible={show} title="浙江省" position={new AMap.LngLat(120.153576,30.287459)} />
          <Marker visible={show} title="安徽省" position={new AMap.LngLat(117.283042,31.86119)} />
          <Marker visible={show} title="福建省" position={new AMap.LngLat(119.306239,26.075302)} />
          <Marker visible={show} title="江西省" position={new AMap.LngLat(115.892151,28.676493)} />
          <Marker visible={show} title="山东省" position={new AMap.LngLat(117.000923,36.675807)} />
          <Marker visible={show} title="河南省" position={new AMap.LngLat(113.665412,34.757975)} />
          <Marker visible={show} title="湖北省" position={new AMap.LngLat(114.298572,30.584355)} />
          <Marker visible={show} title="湖南省" position={new AMap.LngLat(112.982279,28.19409)} />
          <Marker visible={show} title="广东省" position={new AMap.LngLat(113.280637,23.125178)} />
          <Marker visible={show} title="广西壮族自治区" position={new AMap.LngLat(108.320004,22.82402)} />
          <Marker visible={show} title="海南省" position={new AMap.LngLat(110.33119,20.031971)} />
          <Marker visible={show} title="重庆市" position={new AMap.LngLat(106.504962,29.533155)} />
          <Marker visible={show} title="四川省" position={new AMap.LngLat(104.065735,30.659462)} />
          <Marker visible={show} title="贵州省" position={new AMap.LngLat(106.713478,26.578343)} />
          <Marker visible={show} title="云南省" position={new AMap.LngLat(102.712251,25.040609)} />
          <Marker visible={show} title="西藏自治区" position={new AMap.LngLat(91.132212,29.660361)} />
          <Marker visible={show} title="陕西省" position={new AMap.LngLat(108.948024,34.263161)} />
          <Marker visible={show} title="甘肃省" position={new AMap.LngLat(103.823557,36.058039)} />
          <Marker visible={show} title="青海省" position={new AMap.LngLat(101.778916,36.623178)} />
          <Marker visible={show} title="宁夏回族自治区" position={new AMap.LngLat(106.278179,38.46637)} />
          <Marker visible={show} title="新疆维吾尔自治区" position={new AMap.LngLat(87.617733,43.792818)} />
          <Marker visible={show} title="台湾省" position={new AMap.LngLat(121.509062,25.044332)} />
          <Marker visible={show} title="香港特別行政區" position={new AMap.LngLat(114.173355,22.320048)} />
          <Marker visible={show} title="澳門特別行政區" position={new AMap.LngLat(113.54909,22.198951)} />
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

点标注的文本标签

import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Map, APILoader, Marker } from '@uiw/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  const [count, setCount] = useState(1);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map zoom={4}>
          <Marker
            visible={show}
            title="北京市"
            // offset={new AMap.Pixel(-13, -30)}
            label={{
              // 设置文本标注偏移量
              // offset: new AMap.Pixel(20, 20),
              // 设置文本标注内容
              content: "<div class='info'>我是 marker 的 label 标签</div>",
              // 设置文本标注方位
              direction: 'right'
            }}
            position={new AMap.LngLat(117.283042,31.86119)}
          />
          <Marker
            visible={show}
            title="北京市"
            label={{
              // 设置文本标注内容
              content: "<div class='info'>我是 marker 222的 label 标签</div>",
              // 设置文本标注方位
              direction: 'right'
            }}
            draggable
            bubble={true}
            // content="<div>我是 marker 的 label 标签</div>"
            position={new AMap.LngLat(113.280637,23.125178)}
          >
            <div
              style={{
                height: '32px',
                width: '23px',
                margin: '-31px 0 0 -10px',
                background: 'url(https://amap.com/assets/img/poi-marker.png) 437px 267px',
                backgroundSize: '437px 267px',
                backgroundPosition: '-9px -3px'
              }}
            />
            <div>
              我是 marker 的 {count} label 标签
              <button onClick={() => setCount(count + 1)}>
                {count} 点击 + 1
              </button>
            </div>
          </Marker>
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

自适应显示多个点标记

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, Marker } from '@uiw/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  const [map, setMap] = useState();
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <button onClick={() => {
        if (map) {
          map.setFitView(null, false, [150, 60, 100, 60]);
        }
      }}>
        地图自适应显示到合适的范围
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map
          zoom={13}
          center={[116.397428, 39.90923]}
          ref={(instance) => {
            if (instance && instance.map && !map) {
              setMap(instance.map);
            }
          }}
        >
          <Marker
            visible={show}
            icon={new AMap.Icon({
              imageSize: new AMap.Size(25, 34),
              image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png'
            })}
            offset={new AMap.Pixel(-13, -30)}
            position={new AMap.LngLat(116.205467, 39.907761)}
          />
          <Marker
            visible={show}
            icon={new AMap.Icon({
              imageSize: new AMap.Size(25, 34),
              image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png'
            })}
            offset={new AMap.Pixel(-13, -30)}
            position={[116.368904, 39.913423]}
          />
          <Marker
            visible={show}
            icon={new AMap.Icon({
              imageSize: new AMap.Size(25, 34),
              image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png'
            })}
            offset={new AMap.Pixel(-13, -30)}
            position={[116.305467, 39.807761]}
          />
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

自定义标记

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, Marker } from '@uiw/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  const [map, setMap] = useState();
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <button onClick={() => {
        if (map) {
          map.setFitView(null, false, [150, 60, 100, 60]);
        }
      }}>
        地图自适应显示到合适的范围
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map
          zoom={10}
          center={[116.397428, 39.90923]}
          ref={(instance) => {
            if (instance && instance.map && !map) {
              setMap(instance.map);
            }
          }}
        >
          <Marker
            visible={show}
            offset={new AMap.Pixel(-13, -30)}
            position={new AMap.LngLat(116.205467, 39.907761)}
          >
            <div style={{ background: 'red', color: '#fff' }}>
              我是 Marker
            </div>
          </Marker>
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

Props

更多参数设置

事件

事件类型文档