@uiw/react-amap-marker

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

7.1.3
latest
Source
npm

Version published: 5 months ago

Weekly downloads: 24; decreased by-89.09%

Maintainers: 0

Weekly downloads

Created: 3 years ago

Source

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

更多参数设置

参数	说明	类型	默认值
visible	覆盖物是否可见。	`boolean`	-
map	要显示该marker的地图对象	`Map`	-
position	点标记在地图上显示的位置，默认为地图中心点	`LngLat`	-
offset	点标记显示位置偏移量，默认值为 `Pixel(-10,-34)`。	`Pixel`	-
content	点标记显示内容。可以是 `HTML` 要素字符串或者 `HTML DOM` 对象。`icon` 属性将被覆盖。	`ReactNode`	-
children	点标记显示内容。`children`有效时，`icon` 属性将被覆盖。	`ReactNode`	-

事件

事件类型文档

参数	说明	类型
onClick	鼠标左键单击事件	`(event: MapsEvent): void;`
onDblClick	鼠标左键双击事件	`(event: MapsEvent): void;`
onRightClick	鼠标右键单击事件	`(event: MapsEvent): void;`
onMouseMove	鼠标移动	`(event: MapsEvent): void;`
onMouseOver	鼠标移近点标记时触发事件	`(event: MapsEvent): void;`
onMouseOut	鼠标移出点标记时触发事件	`(event: MapsEvent): void;`
onMouseDown	鼠标在点标记上按下时触发事件	`(event: MapsEvent): void;`
onMouseUp	鼠标在点标记上按下后抬起时触发事件	`(event: MapsEvent): void;`
onDragStart	开始拖拽点标记时触发事件	`(event: MapsEvent): void;`
onDragging	鼠标拖拽移动点标记时触发事件	`(event: MapsEvent): void;`
onDragEnd	点标记拖拽移动结束触发事件	`(event: MapsEvent): void;`
onMoving	点标记在执行	`(obj: { passedPath:Array<LngLat> }): void;`
onMoveEnd	点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发	`(): void;`
onMoveAlong	点标记执行moveAlong动画一次后触发事件	`(): void;`
onTouchStart	触摸开始时触发事件，仅适用移动设备	`(event: MapsEvent): void;`
onTouchMove	触摸移动进行中时触发事件，仅适用移动设备	`(event: MapsEvent): void;`
onTouchEnd	触摸结束时触发事件，仅适用移动设备	`(event: MapsEvent): void;`

Keywords

FAQs

Is @uiw/react-amap-marker popular?

Is @uiw/react-amap-marker well maintained?

Package last updated on 20 Sep 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install