Angular Google地图 - 如何访问地图本身

发布于 2025-02-04 10:47:31 字数 1267 浏览 4 评论 0原文

我正在使用 https://github.com/angular.com/angular.com/angular.com/angular.com /组件/Tree/Main/SRC/Google-Maps

我在屏幕上加载了一张地图，但我也想使用这些位置API。尽管图书馆支持地理编码，但没有地理编码。

我一直在尝试以下代码

        const map1: any = document.querySelector("google-map") as unknown;
        console.log("lookup", map1)

        const map2: GoogleMap = map1;
        var request = {
            query: 'albina',
            fields: ['name', 'geometry'],
        };
        var service = new google.maps.places.PlacesService(map2);
        service.findPlaceFromQuery(request, (results, status) => console.log(results, status))

，我的模板在JavaScript中读取

        <google-map [options]="options" class="col-sm-8">
            <map-marker
                [options]="markerOptions"
                [position]="markerPosition"
            ></map-marker>
        </google-map>

此功能 - QuerySelector返回DOM节点，但可以成功传递给Placesservice。当我使用TypeScript时，我一直被告知我无法通过HTML元素（尽管尝试覆盖类型的尝试都没有承受）。

实际上，我想要的是按原样访问地图，而不是使用DOM查找，但是我无法算出如何访问该地图。如您所见，我能够创建和传递选项到组件，但对角度不足以使地图恢复

原文

I'm using Angular 14 with https://github.com/angular/components/tree/main/src/google-maps

I have a map loaded on my screen, but I also want to use the Places Api. Although geocoding is supported by the library, places is not.

I have been trying the following code

        const map1: any = document.querySelector("google-map") as unknown;
        console.log("lookup", map1)

        const map2: GoogleMap = map1;
        var request = {
            query: 'albina',
            fields: ['name', 'geometry'],
        };
        var service = new google.maps.places.PlacesService(map2);
        service.findPlaceFromQuery(request, (results, status) => console.log(results, status))

and my template reads

        <google-map [options]="options" class="col-sm-8">
            <map-marker
                [options]="markerOptions"
                [position]="markerPosition"
            ></map-marker>
        </google-map>

This works in javascript - the querySelector returns the dom node, but it can be passed successfully to PlacesService. As I am using typescript I keep being told that I can't pass an html element (not withstanding my attempts to override the type).

Really what I want is to access the map as is, rather than using dom lookups, but I cannot work out how to access that. As you can see, I am able to create and pass options to the component, but don't know angular well enough to get the map back

分享到QQ

分享到微博