React中MapBox双击获取坐标的问题排查与解决

我计划实现用户双击地图位置时显示附近路线的功能，但获取对应坐标时出现问题，当前代码如下：

import React, { useState } from 'react';
import Map from 'react-map-gl';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from '@apollo/client';

const client = new ApolloClient({
  uri: TOKEN,
  cache: new InMemoryCache(),
});

function handleClick(map, event) {
  var lngLat = event.lngLat;
  console.log(lngLat)
}

function App() {

  return (
    <>
      <ApolloProvider client={client}>
      </ApolloProvider>
      
      <Map
        mapboxAccessToken=TOKEN
        initialViewState={{
          longitude: 121.04042520880047,
          latitude: 14.649743779882588,
          zoom: 14
        }}
        style={{ width: window.innerWidth, height: window.innerHeight }}
        mapStyle="mapbox://styles/mapbox/light-v11"
        onDblClick={handleClick}
      ></Map>
    </>
  );
}

export default App

运行代码后出现如下错误：

ERROR
无法读取未定义的属性（读取'lngLat'）
TypeError: Cannot read properties of undefined (reading 'lngLat')
at handleClick (http://localhost:3000/main.3e317df54a291f15fa87.hot-update.js:35:22)
at Mapbox._onPointerEvent (http://localhost:3000/static/js/bundle.js:34680:9)
at Map.fire (http://localhost:3000/static/js/vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:1007:32)
at Mapbox._fireEvent (http://localhost:3000/static/js/bundle.js:35107:14)
at hr._firePreventable (http://localhost:3000/static/js/vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:26089:23)
at hr.dblclick (http://localhost:3000/static/js/vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:26068:21)
at Xr.handleEvent (http://localhost:3000/static/js/vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:27078:93)

解决方案 #

错误原因是react-map-gl的onDblClick回调参数顺序不符合你的写法：回调的第一个参数是事件对象，第二个才是地图实例，你把参数顺序写反了，导致event变量实际为undefined，读取lngLat时触发报错。

修改handleClick函数的参数顺序即可解决：

function handleClick(event, map) {
  const lngLat = event.lngLat;
  console.log('双击坐标：', lngLat);
  // 后续可使用该坐标调用路线API，比如Mapbox Directions API，或你的GraphQL接口获取附近路线
}

修改后双击地图就能正确拿到经纬度坐标。若要实现显示附近路线的功能，拿到lngLat后可：

• 调用Mapbox Directions API（需对应权限），传入该坐标作为起点/终点，获取路线数据后在地图上渲染
• 若通过自有GraphQL接口获取路线，使用Apollo的useMutation或useQuery发起请求，传入经纬度参数，拿到数据后处理渲染

内容的提问来源于stack exchange，提问作者Ace Dom