如何将MySQL存储的字符串格式多边形坐标转换为Google Maps可识别的LatLng格式

解决方法 #

报错的核心原因是 google.maps.Polygon 的 paths 参数仅支持两类输入：google.maps.LatLng 实例组成的数组，或是 {lat: 纬度值, lng: 经度值} 格式的普通对象数组，你直接传入纯字符串格式的坐标自然触发类型校验失败。

你可以按照以下逻辑把数据库取出的坐标字符串转换成符合要求的格式：

const polygon_coords = '(55.46701996570562, 11.983202375732418),(55.46604683879285, 11.982086576782223),(55.465316977846335, 11.983803190551754),(55.465900867684354, 11.985863127075191)';

// 移除所有括号后按逗号拆分所有坐标值
const coordList = polygon_coords.replace(/[()]/g, '').split(',');
const formattedPaths = [];

// 两两拼接为LatLngLiteral格式
for (let i = 0; i < coordList.length; i += 2) {
  const lat = parseFloat(coordList[i].trim());
  const lng = parseFloat(coordList[i + 1].trim());
  // 如果你需要用LatLng实例，把这行换成 formattedPaths.push(new google.maps.LatLng(lat, lng)) 即可
  formattedPaths.push({ lat, lng });
}

// 传入转换后的数组生成Polygon
const coords = new google.maps.Polygon({
    paths: formattedPaths,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    editable: true
});

注意事项

你当前存储的坐标顺序是（纬度, 经度），和Google Maps要求的参数顺序完全匹配，不需要调换位置。如果后续存储规则变更，记得调整循环里lat和lng的取值顺序即可。
如果需要频繁做这类转换，把字符串转坐标数组的逻辑封装成公共函数即可，使用时可以加个简单的格式校验，避免数据库取出异常字符串时前端报错。

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