使用google.maps.importLibrary API添加标记圆形时遇错误求助

核心问题 #

你遇到的Error: The library circle is unknown是因为不存在名为"circle"的独立库，Circle类属于maps核心库范畴，不需要单独导入。

代码修正步骤 #

1. 移除错误的Circle导入语句
   删除这一行无效导入：

   const { Circle } = await google.maps.importLibrary( "circle" ) ;
   

   改为从maps库中解构Circle：

   const { Map, Circle } = await google.maps.importLibrary( "maps" ) ;
   

2. 修正Circle初始化的map参数
   创建Circle时的NewMap是无效属性名，Circle配置项需要明确指定map字段，把：

   const circle = new Circle(
       {
           // ...其他配置
           NewMap,
           // ...其他配置
       }
   ) ;
   

   里的NewMap改为map: NewMap。

修正后的完整PinIt方法代码 #

PinIt : async function ( sComp, sName, nLat, nLon, nRadius, sFunc = 'PinIt' )
{
    if ( ModGPS.debug )    console.log( ModGPS.Object + '    ' + sFunc + '()' ) ;
    
    const { Map, Circle } = await google.maps.importLibrary( "maps" ) ;
    const { Marker } = await google.maps.importLibrary( "marker" ) ;
    
    let oPosition = { lat : nLat, lng : nLon, } ;
    
    let oCoord =
    {
        zoom   : 18,
        center : oPosition ,
        mapId  : 'Company_Properties',
    } ;
    
    let NewMap = new Map( ModGPS.dom.Map, oCoord ) ;
    
    let sDisplay = ".\n \n      " + sComp + "   " + sName + "      \n \n." ;
    
    const marker = new Marker( { map : NewMap, position : oPosition, title : sDisplay, } ) ;
    
    const circle = new Circle(
        {
            strokeColor   : "#FF0000",
            strokeOpacity : 0.8,
            strokeWeight  : 2,
            fillColor     : "#FF0000",
            fillOpacity   : 0.35,
            map           : NewMap,
            center        : oPosition,
            radius        : nRadius,
        }
    ) ;
},

补充说明 #

• 旧版无导入写法里的google.maps.Circle本身就是核心maps库的成员，所以模块化导入时必须从maps库获取，而非不存在的"circle"库。
• drawing库是用于交互式绘制图形的组件，geometry库用于几何计算（如距离、面积），二者都和静态创建Circle无关。

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