Google Maps API设置JSON数据中心失败，如何移除坐标双引号？

嗨，我来帮你捋清楚这个问题的根源和解决方案：

首先，你遇到的核心问题是混淆了字符串、JS对象和标准JSON的处理逻辑，导致解析后的坐标还是字符串类型，而Google Maps的center配置需要的是数字类型的纬度和经度，这才是配置不生效的关键。

为什么你的移除引号操作没用？ #

你用position.replace(/\"/g, "")得到的字符串看起来像JS对象，但它并不是标准JSON格式——标准JSON要求所有键必须用双引号包裹。当你用JSON.parse去解析这个不合法的字符串时，浏览器会做容错处理，但最终解析出来的lat和lng还是会被识别为字符串类型，这就是你依然看到带引号结果的原因。

针对性解决方案分两种情况： #

情况1：从数据库获取的position本身是JS对象

如果控制台输出的{lat:31.752809648231494,lng:-7.927621380715323}是一个JS对象（不是字符串），那你完全不需要做任何JSON转换，直接把它传给Google Maps的center参数就行：

// 假设position是从数据库拿到的JS对象
const map = new google.maps.Map(document.getElementById('map'), {
  center: position,
  zoom: 12 // 可以根据需求调整缩放级别
});

情况2：从数据库获取的position是字符串类型

如果它是一个类似"{lat:31.752809648231494,lng:-7.927621380715323}"的字符串，你需要先把它转换成标准JSON格式，再解析成JS对象：

// 第一步：给键名加上双引号，转换成合法的JSON字符串
const validJsonString = position.replace(/lat:/g, '"lat":').replace(/lng:/g, '"lng":');
// 第二步：解析成JS对象，此时lat和lng是数字类型
const posObj = JSON.parse(validJsonString);
// 第三步：传入Google Maps配置
const map = new google.maps.Map(document.getElementById('map'), {
  center: posObj,
  zoom: 12
});

额外优化建议 #

如果可以控制数据库返回的格式，尽量直接返回标准JSON格式的字符串，比如：

{"lat":31.752809648231494,"lng":-7.927621380715323}

这样前端只需要直接JSON.parse就能得到带有数字类型坐标的对象，省去了字符串替换的步骤，更稳定可靠。

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