Question

我的问题与此question有些相似，但没有答案可以帮助解决我的问题。

我正在使用google-maps-angular2 (plnkr)在我的网络应用中实施谷歌地图。一切正常，我的地图加载，我可以使用routeService，设置标记，infowindows ...但是，有一个问题我似乎无法摆脱：当我用我的鼠标移动地图时，鼠标不释放。因此，即使我的鼠标启动（鼠标向上事件），我的地图仍在移动。这使得设置标记或航点非常困难。

以下是我加载地图的方式：

<input type="text" class="map-input" placeholder="Search..." #inputElement>
<div mapSpy class="map shadow" #mapElement></div>

在我的组件中，我使用此函数加载地图：

loadMap() {
        this.gapi.init.then((maps) => {
            this.mapLoaded = true;
            const loc = new maps.LatLng(48.858093, 2.294694); 

            this.map = new maps.Map(this.mapElement.nativeElement, {
                zoom: 13,
                center: loc,
                zoomControlOptions: {
                    style: maps.ZoomControlStyle.LARGE,
                    position: maps.ControlPosition.RIGHT_BOTTOM
                }
          }
     });
}

我也在地图上使用CSS：

.map{
    position: relative;
    height: 250px;
    border: 1px solid #a5a3a3;
    background-color: #e5e3df;
}

然而，我的问题仍然存在。我尝试删除所有样式，但问题仍然存在。但我仍然找不到这个问题的原因。

感谢您的帮助！：）

Answer 1

好的，经过几个小时的搜索，我终于解决了！答案来自onLayout()（不同的问题，但解决方案有效）。

我只是在google maps api链接中添加＆amp; v = 3：

"https://maps.googleapis.com/maps/api/js?libraries=places&key=[KEY]&v=3"

我希望这可以帮助那些面临同样问题的人。

角色中的Google地图 - 拖动地图

1 个答案: