やりたいこと
GoogleMapと地図のMarker一覧を取得するAPIを組み合わせて、Reactアプリケーションを作ることを想定しています。
その際に、地図の中心地がドラッグで移動された際に、Marker一覧も取得し直して、地図にMarkerの再配置をしたいです。
イメージとしてはドラッグ前が以下のような感じとした場合、
ドラッグ後はこのような感じでMarkerも再取得される感じです。
前提
- 地図用のライブラリとして、google-maps-reactを使います。詳細はReact.js内でGoogle Mapの現在地を表示するを参照ください。
- 実装は、React Hooksの形式でstateの管理は【React Hooks】useReducer + useContextでグローバルなストアを扱うを参考にしています。
サンプルソース
※ reducerやstoreの実装内容は割愛
GoogleMapComponent.js
import React, { useContext } from "react";
import { GoogleApiWrapper, Marker, Map } from "google-maps-react";
import { MapStore } from "../../store/MapStore";
export const GoogleMapComponent = ({ google }) => {
const { state, dispatch } = useContext(MapStore);
const location = state.currentLocation;
var markerList = [];
// ステートの情報でMarkerを作成
state.markerList.map((m, i) => {
return markerList.push(
<Marker
key={i}
title={m.name}
position={{ lat: m.latitude, lng: m.longitude }}
/>
);
});
// 地図ドラッグ時に走る関数
const centerMoved = (_, map) => {
// 変更後の中心を取得
const center = map.getCenter();
// APIでのMarker取得処理
axios
.get("http://localhost/test", {
latitude: center.lat(),
longitude: center.lng(),
})
.then((results) => {
if (results.status === 200) {
dispatch({
type: "CHANGE_LOCATION",
currentLocation: {
latitude: latitude,
longitude: longitude,
},
markerList: results.data,
});
} else {
// エラー時の処理
}
})
.catch(() => {
// エラー時の処理
});
};
return (
<Map
google={google}
zoom={15}
center={{ lat: location.latitude, lng: location.longitude }}
initialCenter={{ lat: location.latitude, lng: location.longitude }}
onDragend={centerMoved}
>
{markerList}
</Map>
);
};
export default GoogleApiWrapper({
apiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
})(GoogleMapComponent);