地图:预期元素类型的 mapDiv 但未定义传递 - 谷歌地图
Posted
技术标签:
【中文标题】地图:预期元素类型的 mapDiv 但未定义传递 - 谷歌地图【英文标题】:Map: Expected mapDiv of type Element but was passed undefined - google maps 【发布时间】:2020-08-30 05:24:42 【问题描述】:我在 div 内有一个地图,其引用为 #mapa
当我想在地图中追踪路线时,地图会刷新。我不想刷新地图我有以下代码:
<div style="height: 500px; width: auto;" #mapa>
<google-map [zoom]="zoom" [center]="center" [options]="options" (mapClick)="click($event)">
<map-marker #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, marker.info)" (mapDragend)="moveMap($event)">
</map-marker>
<map-info-window> infoContent </map-info-window>
</google-map>
</div>
如果我删除带有引用 #mapa
的 div 并将其放入 <google-map>
标记中,则会出现标题错误并显示没有路线的地图。
trazarRutaMapa()
const directionsService = new google.maps.DirectionsService;
const directionsDisplay = new google.maps.DirectionsRenderer;
const map = new google.maps.Map(this.mapa.nativeElement,
zoom: 7,
center:
lat: this.markers[0].position.lat,
lng: this.markers[0].position.lng
);
directionsDisplay.setMap(map);
directionsDisplay.setOptions(
suppressMarkers: false,
draggable: true,
markerOptions:
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
);
directionsService.route(
origin:
lat: this.markers[0].position.lat,
lng: this.markers[0].position.lng
,
destination:
lat: this.markers[1].position.lat,
lng: this.markers[1].position.lng
,
travelMode: google.maps.TravelMode.DRIVING,
, (response, status) =>
if (status === google.maps.DirectionsStatus.OK)
console.log('ESTATUS OKEY');
directionsDisplay.setDirections(response);
else
window.alert("Fallo el estatus" + status);
);
【问题讨论】:
您能否提供一个代码沙盒或堆栈闪电战,以便我们可以从我们这边重现此问题? 您的问题缺少重要信息,因此很难理解问题所在。但是,这里有一个很好的选择:使用directions module of @bespunky/angular-google-maps。它允许您直接使用标记来指示方向。没有额外的代码。 【参考方案1】:据我所知,您只需使用@angular/google-maps 官方模块即可实现您的目标。
你的 html 会变成这样
<google-map [options]="options">
<map-marker *ngFor="let some of somearray" [icon]="...", [label]="...", [position]="..."></map-marker>
<map-directions-renderer [directions]="..." [options]="..."></map-directions-renderer>
</google-map>
你的 traazarRoutaMapa() 方法会变成这样:
trazarRoutaMapa(): void
const directionsService = new google.maps.DirectionsService; // better if injected from constructor
const request: google.maps.DirectionsRequest =
destination:
lat: this.markers[0].position.lat,
lng: this.markers[0].position.lng
,
origin:
lat: this.markers[1].position.lat,
lng: this.markers[1].position.lng
,
travelMode: google.maps.TravelMode.DRIVING
;
return directionsService.route(
request,
(response, status) =>
if (status === google.maps.DirectionsStatus.OK)
console.log('ESTATUS OKEY');
directionsDisplay.setDirections(response);
else
window.alert("Fallo el estatus" + status);
);
免责声明:我没有测试代码,只是在记事本复制/粘贴上创建的 :)
【讨论】:
以上是关于地图:预期元素类型的 mapDiv 但未定义传递 - 谷歌地图的主要内容,如果未能解决你的问题,请参考以下文章
MapBox GL Android:来自自定义图块源的离线地图已下载但未使用
异常“已传递主参数'webdriver'但未定义主参数创建注释时出错
FirebaseError:预期类型“Hc”,但它是:自定义 Yc 对象]
Invariant Violation:Invariant Violation:元素类型无效:预期为字符串(对于内置组件)但得到:未定义