时间戳

首页 > 解决方案 > 如何使用谷歌地图根据获取的纬度和经度定位地图

angular - 如何使用谷歌地图根据获取的纬度和经度定位地图

问题描述

我已经使用 placeAPI 来获取纬度和经度并尝试将其与地图绑定，但我遇到了问题，因为找不到 null 的 gmapElement。我在这里粘贴我的演示。

在这里，我使用 placesAPI 来获取 lat 和 lon 值，并且我将这些值分配为 lat 和 lon，但我希望这些 lat 和 lon 值也可以通过给定的地址获取 lat 和 lon 值。

TS：

var map = new window['google'].maps.Map(this.gmapElement.nativeElement, {
  center: {lat: -33.867, lng: 151.195},
  zoom: 8
});
var request = {
  query:geoAddress,
  fields: ['name', 'geometry'],
};

错误：

Cannot read property 'gmapElement' of null

HTML：

<div class="row mt-5" [hidden]="!map">
                            <div class="col-md-9 mx-auto">
                                <h2 class="text-left">Google Map</h2>
                                <div class="card mt-3">
                                    <div class="card-body">
                                        <div #mapRef style="width:100%;height:400px"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

演示

标签： angulargoogle-maps

解决方案

我已经解决了你的问题。并创建了演示，请检查并验证。您在 service.findPlaceFromQuery() 函数中的 this 范围已更改，因此您收到了该错误。

已解决的问题演示

推荐阅读