Javascript Google Maps DrawingManager在Angular中未定义
我试图通过使用Angular单击按钮来更改GoogleMaps绘图管理器的几个选项。但我收到错误消息,说DrawingManager变量未定义 我在Angular组件的ngAfterViewInit函数中初始化了GoogleMaps和DrawingManager。Google Map对象和图形管理器对象被指定给组件中的变量,如代码所示。我想通过单击组件中的按钮来更改图形管理器的几个选项。单击按钮可调用“drawControlEnable”功能。但是DrawingManager对象在“drawControlEnable”函数中未定义。我已经将GoogleMaps脚本放在index.html中,并为组件编写了代码 Index.htmlJavascript Google Maps DrawingManager在Angular中未定义,javascript,angular,google-maps,Javascript,Angular,Google Maps,我试图通过使用Angular单击按钮来更改GoogleMaps绘图管理器的几个选项。但我收到错误消息,说DrawingManager变量未定义 我在Angular组件的ngAfterViewInit函数中初始化了GoogleMaps和DrawingManager。Google Map对象和图形管理器对象被指定给组件中的变量,如代码所示。我想通过单击组件中的按钮来更改图形管理器的几个选项。单击按钮可调用“drawControlEnable”功能。但是DrawingManager对象在“drawCo
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXX&libraries=drawing,geometry"></script>
如何通过单击按钮更改DrawingManager选项?这是如何创建地图并使用按钮更改绘图控制选项的: 首先,我声明两个变量:一个用于map,另一个用于drawingManager
theMap: any;
drawingManager: any;
我在ngOnInit中创建地图并调用drawingManager:
this.theMap = this.initMap(lat, lng);
if(this.theMap) {
this.initDrawingManager(this.theMap)
}
创建地图和初始化图形管理器的两个功能是:
initMap(lat, lng) {
let mapProp = {
center: new google.maps.LatLng(lat, lng),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
let map = new google.maps.Map(document.getElementById("map"), mapProp);
let marker = new google.maps.Marker({
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
animation: google.maps.Animation.DROP,
position: { lat: lat, lng: lng },
map: map
})
return map;
}
及
更改drawingControl选项的功能是:
change() {
this.drawingManager.setOptions({
drawingControl: true
});
}
HTML是:
<button
(click)="change()">
change
</button>
改变
单击该按钮,图形控件将显示在地图上
我们的不同之处在于我用ngOnInit创建了地图
change() {
this.drawingManager.setOptions({
drawingControl: true
});
}
<button
(click)="change()">
change
</button>