Embed-react 是什么？

这是一个专为将株式会社Geolonia提供的GeoloniaMaps嵌入React应用程序所设计的库。

软件库地址：https://github.com/geolonia/embed-react/tree/main

一起来编程吧！

准备好

创建一个React应用程序。

npx create-react-app my-app

我会安装embed-react。

npm install --save @geolonia/embed-react

◼︎ 展示地图

请查看此教程以获取API密钥的获取方法！

import './App.css';
import { GeoloniaMap } from '@geolonia/embed-react';

function App() {
  return (
    <div className="App">
      <GeoloniaMap 
          apiKey={api-key}
          style={{height: "400px", width: "100%"}}
          lat={127.96911949041572}
          lng={26.588972870618022}
          zoom="8"
      />
    </div>
  );
}

export default App;

显示多个马克笔

import './App.css';
import { GeoloniaMap } from '@geolonia/embed-react';
import React from "react";


function App() {

  // markerの位置データ
  const data = [
    {
        lat: 26.1913942,
        lon: 127.8004151
    },
    {
        lat: 26.3351306,
        lon: 127.7993454
    },
    {
        lat: 24.3310297,
        lon: 123.9088860
    },
  ];

  const mapRef = React.useRef(null);

  // コールバック関数
  const handler = React.useCallback(() => {
    const map = mapRef.current;
    // データ分markerオブジェクトを生成
    for(let i = 0; i < data.length; i++) {
        const marker = new geolonia.Marker({color: '#F9BF3D'})
                        .setLngLat([data[i].lon, data[i].lat])
                        .addTo(map);
    }
  }, [])


  return (
    <div className="App">
      <GeoloniaMap 
          apiKey={api-key}
          style={{height: "400px", width: "100%"}}
          lat={127.96911949041572}
          lng={26.588972870618022}
          zoom="8"
          marker="off"       // これ追加
          mapRef={mapRef}    // これ追加
          onLoad={handler}   // これ追加
      />
    </div>
  );

}

export default App;

加载地图后，将执行设置在onLoad上的回调函数，在该函数中生成marker对象并将其与地图关联。
https://github.com/geolonia/embed-react/blob/main/src/GeoloniaMap/GeoloniaMap.tsx#L61

在标记上添加事件

在Maplibre的标记中，虽然有drug事件，但没有click事件，我很烦恼如何在标记被点击时执行处理，但最后发现可以使用普通的addEventListener来实现。

// 省略
// コールバック関数
const handler = React.useCallback(() => {
    const map = mapRef.current;
    // データ分markerオブジェクトを生成
    for(let i = 0; i < data.length; i++) {
        const marker = new geolonia.Marker({color: '#F9BF3D'})
                        .setLngLat([data[i].lon, data[i].lat])
                        .addTo(map);
        // ↓ これで
        marker.getElement().addEventListener('click', () => {
            alert("click!!")
        }, false);
    }
}, [])

为了参考

https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker.event:dragstart