react-AMAP高德地图多点标记鼠标点击事件

最新推荐文章于 2025-03-27 15:33:24 发布

原创

最新推荐文章于 2025-03-27 15:33:24 发布

· 2.7k 阅读

3 ·

版权

文章标签：

#react-amap #react高德地图 #react-amap高德地图多标记窗口鼠标事件 #标记鼠标事件 #react-amap InfoWindow

本文介绍了如何在React应用中使用react-amap库创建高德地图并实现多点标记及鼠标点击事件。通过示例展示了如何配置Key，以及利用InfoWindow展示标记详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一只努力前进的菜鸟！——林匠

客套话不说了，先上效果图为敬！
在这里插入图片描述
react-amap 是一个基于 React 封装的高德地图组件。
https://elemefe.github.io/react-amap/articles/start
在高德开放平台申请你自己的 Key。
https://lbs.amap.com/

安装
npm install --save react-amap

GaoDeMap.js

import { Map, Markers, InfoWindow } from 'react-amap';
import React, { Component } from 'react';

const styleA = {
  background: `url('http://47.110.55.133:8080/uploads/gif/20190816/1565938588950.gif')`,
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center',
  width: '15px',
  height: '30px',
  color: '#000',
  textAlign: 'center',
  lineHeight: '40px',

};
const styleB = {
  fontsize: '11px'