Question

我正在向Google地图添加多个标记。我想要发生的是当用户点击标记时，它应该导航到显示有关该位置的更多信息的页面。

我使用的是Angular 4.2.4和Google Maps JavaScript API（不是SebastianM's angular-google-maps库）。

这是我目前正在尝试的内容：

// declare router and injected it into constructor
...

var googleMarker = customMarker.createMarker();
googleMarker.addListener('click', function () {
    console.log(`Clicked on marker`)
    this.router.navigateByUrl(`/drivers/${driver.id}`)
});

但点击时总是会返回以下错误：

Uncaught TypeError: Cannot read property 'navigateByUrl' of undefined
    at _.Me.<anonymous> (map.component.ts:118)
    at Object._.A.trigger (js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99)
    at BU.handleEvent (marker.js:51)
    at jy._.k.de (map.js:45)
    at jy._.k.Ki (map.js:43)
    at Object._.A.trigger (js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99)
    at hq.<anonymous> (common.js:132)
    at Object._.A.trigger (js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99)
    at hq._.k.Wi (common.js:192)
    at HTMLDivElement.<anonymous> (js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:36)
(anonymous) @ map.component.ts:118
_.A.trigger @ js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99
BU.handleEvent @ marker.js:51
_.k.de @ map.js:45
_.k.Ki @ map.js:43
_.A.trigger @ js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99
(anonymous) @ common.js:132
_.A.trigger @ js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:99
_.k.Wi @ common.js:192
(anonymous) @ js?key=AIzaSyDQ2QCrspYAltByRrP3vTN8OpSXcXZkbVk&libraries=geometry:36
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
ZoneTask.invoke @ zone.js:486

当有人点击某个标记时，路由到指定网址的正确方法是什么？

编辑 - 这是我的组件的样子：

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, RouterModule, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';

import { Coordinate } from '../../models/coordinate.model';
import { CustomMarker } from '../../models/custom-marker.model';

declare var google: any;
declare var MarkerClusterer: any;

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

    // ...

    constructor(private db: AngularFireDatabase, private route: ActivatedRoute, private router: Router) { }

    ngOnInit() {
        // ...

        // Drivers
        this.drivers = this.db.list('/drivers');
        this.subDrivers = this.drivers.subscribe(snapshot => {
            this.stopsSnapshot = snapshot;

            // Calculate map bounds based on markers
            snapshot.forEach(driver => {
                // Add stop marker to map
                var customMarker = new CustomMarker(driver.color, 'driver', null, driver, this.map, "D");

                var googleMarker = customMarker.createMarker();
                googleMarker.addListener('click', function () {
                    this.router.navigateByUrl(`/drivers/${driver.id}`)
                });
            });
        });
    }

    // ...
}

Answer 1

您的错误位于0。使用$menuItems更改this关键字的上下文。

相反，请使用保留上下文的胖箭头：#attributes: array:23 [ "ID" => 135 "post_author" => 1 "post_date" => "2017-06-23 10:59:47" "post_date_gmt" => "2017-06-23 08:59:47" "post_content" => " " "post_title" => "" "post_excerpt" => "" "post_status" => "publish" "comment_status" => "closed" "ping_status" => "closed" "post_password" => "" "post_name" => "135" "to_ping" => "" "pinged" => "" "post_modified" => "2017-06-29 09:37:49" "post_modified_gmt" => "2017-06-29 07:37:49" "post_content_filtered" => "" "post_parent" => 0 "guid" => "http://hivnorge.app/?p=135" "menu_order" => 2 "post_type" => "nav_menu_item" "post_mime_type" => "" "comment_count" => 0 ] "meta" => PostMetaCollection {#243 #attributes: array:4 [ "meta_id" => 326 "post_id" => 135 "meta_key" => "_menu_item_menu_item_parent" "meta_value" => "112" ]

未捕获的TypeError：无法读取属性＆＃39; navigateByUrl＆＃39;未定义的

1 个答案: