我见过不使用导入库方法的 API 调用。
喜欢：
cityCircle = new google.maps.Circle(sunCircle);
cityCircle.bindTo('center', marker, 'position');
但我正在使用导入库。
除了圆圈之外，其他所有东西都可以在我的代码中工作。
我收到错误：图书馆圈子未知。
我点击了它推荐的链接。我不知道该用绘图还是几何。
使用 api 文档搜索圆半径永远不会显示任何涉及导入库的内容。
我感谢任何指导。
创建 PIN 码的我的代码。这是在 ModGPS 对象内部（尝试与 OOP 类似。）
PinIt : async function ( sComp, sName, nLat, nLon, nRadius, sFunc = 'PinIt' )
{
if ( ModGPS.debug ) console.log( ModGPS.Object + ' ' + sFunc + '()' ) ;
const { Map } = await google.maps.importLibrary( "maps" ) ;
const { Marker } = await google.maps.importLibrary( "marker" ) ;
const { Circle } = await google.maps.importLibrary( "circle" ) ;
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,
NewMap,
center : oPosition,
radius : nRadius,
}
) ;
},
Circle"maps"API 中没有
"circle"Circleconst { Circle } = await google.maps.importLibrary("circle")
请注意，官方文档中没有任何内容说明这就是导入
Circle如果您转到参考文档中的Circle Class部分，您可以通过调用来访问该类，
const {Circle} = await google.maps.importLibrary("maps")
这意味着
Circle"maps""circle".importLibraryError: The library circle is unknown这是一个示例代码片段，您可以看到它与上面提到的解决方案一起正常工作：
// Initialize and add the map
let map;
async function initMap() {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// This is how you correctly import the Circle class
const { Circle } = await google.maps.importLibrary("maps");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID",
});
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
// instantiating the circle here:
const circle = new Circle({
center: position,
radius: 1000000,
map: map,
})
}
initMap();/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Simple Polygon</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>
<body>
<div id="map"></div>
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
</body>
</html>我希望这有帮助！