我看到的第一个错误是您将 字符串 传递到 new google.maps.LatLng() 。您需要为其提供数字。

不要使用以下代码：

var user_longitude = $("#user-position").attr("data-lng");
var user_latitude = $("#user-position").attr("data-lat");

var currentlatlng = new google.maps.LatLng(user_latitude, user_longitude);

请使用：

var $position = $("#user-position"),
    lat = $position.attr("data-lat"),
    lng = $position.attr("data-lng");

var currentlatlng = new google.maps.LatLng( +lat, +lng );

让我查看其余代码，但这是需要立即修复的一件事。

顺便说一句，作为风格建议，如您所见，我更喜欢像这样在本地化代码中使用较短的名称。由于数据属性为 data-lat 和 data-lng ，而 Maps API 函数称为 LatLng ，因此在这段代码中拼写出 user_latitude 和 user_longitude 并没有什么好处。 lat 和 lng 是 Maps API 代码中相当标准的术语。

第二个问题是此代码中的 icon 对象无效：

var marker = new google.maps.Marker({
    map: map,
    position: currentlatlng,
    icon: { opacity: 0 }
});

icon 对象需要 url ，并且没有 opacity 选项。如果您删除 icon: { opacity: 0 并修复 lat/lng 问题，则地图将加载而不会出错。

如果您想要一个没有图标的标记，一种方法是使用透明的 PNG 文件。您可以将此文件的副本下载到您的服务器：

https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png

然后将此行：

    icon: { opacity: 0 }

更改为：

    icon: 'path/to/1x1.png'

此代码中还有一个错误：

  var circle = new google.maps.Circle({
    map: map,
    fillOpacity: 0,
    strokeWeight: 2,
    strokeOpacity: 0.7,
    radius: 10000,
  });

radius 行末尾的最后一个逗号不应该存在。它只会影响 IE7 等旧版浏览器，但如果删除该逗号，地图在 IE7 中可以正常加载。

此外，关于使用此：

$(document).on("ready", function(){...});

而不是此：

$(function(){...});

这没有任何区别的原因是它们的作用相同！