如何在谷歌地图中改变线路交通的颜色- Angular

Question

我正在做一个应用程序，如下面的链接所示。

https://stackblitz.com/edit/travel-marker-angular-agm

我想把线路交通的颜色改为蓝色。

我尝试使用strokeColor: "blue"，但它没有工作!

我代码:

calcRoute() {
this.line = new google.maps.Polyline({
strokeOpacity: 0.5,
strokeColor: "blue",
path: [],
map: this.map
});
const start = new google.maps.LatLng(51.513237, -0.099102);
const end = new google.maps.LatLng(51.514786, -0.080799);
const request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING,
};
this.directionsService = new google.maps.DirectionsService();
this.directionsService.route(request, (response, status) => {
// Empty response as API KEY EXPIRED
console.log(response);
if (status == google.maps.DirectionsStatus.OK) {
var legs = response.routes[0].legs;
for (let i=0;i<legs.length; i++) {
var steps = legs[i].steps;
for (let j=0; j<steps.length; j++) {
var nextSegment = steps[j].path;
for (let k=0; k<nextSegment.length; k++) {
this.line.getPath().push(nextSegment[k]);
}
}
}
this.initRoute();
}
});
}
// mock directions api
mockDirections() {
const locationArray = locationData.map(l => new google.maps.LatLng(l[0], l[1]));
this.line = new google.maps.Polyline({
strokeOpacity: 0.5,
path: [],
map: this.map
});
locationArray.forEach(l => this.line.getPath().push(l));
const start = new google.maps.LatLng(51.513237, -0.099102);
const end = new google.maps.LatLng(51.514786, -0.080799);
const startMarker = new google.maps.Marker({position: start, map: this.map, label: 'A'});
const endMarker = new google.maps.Marker({position: end, map: this.map, label: 'B'});
this.initRoute();
} ......

Answer 1

尝试使用十六进制值传递颜色…例:strokeColor: '#0000FF'

mockDirections() {
const locationArray = locationData.map(
l => new google.maps.LatLng(l[0], l[1])
);
this.line = new google.maps.Polyline({
strokeOpacity: 0.5,
strokeColor: '#0000FF',    <---Here
path: [],
map: this.map
});
locationArray.forEach(l => this.line.getPath().push(l));
const start = new google.maps.LatLng(51.513237, -0.099102);
const end = new google.maps.LatLng(51.514786, -0.080799);
const startMarker = new google.maps.Marker({
position: start,
map: this.map,
label: "A"
});
const endMarker = new google.maps.Marker({
position: end,
map: this.map,
label: "B"
});
this.initRoute();
}

要根据汽车的位置将地图居中，您可以使用汽车的位置更新地图的中心。为此，您可以使用在代码中定义的事件侦听器(也被注释掉)，并在侦听器中更新映射的中心。请看下面的例子;代码中有三个点用'HERE'表示

import { Component } from "@angular/core";
import { MouseEvent, AgmMap } from "@agm/core";
import {
TravelMarker,
TravelMarkerOptions,
TravelData,
TravelEvents,
EventType
} from "travel-marker";
import locationData from "./loc.json";
declare var google: any;
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
// google maps zoom level
zoom: number = 15;
// initial center position for the map
lat: number = 51.512802;
lng: number = -0.091324;
map: any;
line: any;
directionsService: any;
marker: TravelMarker = null;
// speedMultiplier to control animation speed
speedMultiplier = 1;
onMapReady(map: any) {
console.log(map);
this.map = map;
// this.calcRoute();
this.mockDirections();
this.initEvents();     <---Here (uncommented this so listeners can be invoked)
}
/**
*                  IMPORTANT NOTICE
*  Google stopped its FREE TIER for Directions service.
*  Hence the below route calculation will not work unless you provide your own key with directions api enabled
*
*  Meanwhile, for the sake of demo, precalculated value will be used
*/
// get locations from direction service
calcRoute() {
this.line = new google.maps.Polyline({
strokeOpacity: 0.5,
path: [],
map: this.map
});
const start = new google.maps.LatLng(51.513237, -0.099102);
const end = new google.maps.LatLng(51.514786, -0.080799);
const request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.BICYCLING
};
this.directionsService = new google.maps.DirectionsService();
this.directionsService.route(request, (response, status) => {
// Empty response as API KEY EXPIRED
console.log(response);
if (status == google.maps.DirectionsStatus.OK) {
var legs = response.routes[0].legs;
for (let i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (let j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (let k = 0; k < nextSegment.length; k++) {
this.line.getPath().push(nextSegment[k]);
}
}
}
this.initRoute();
}
});
}
/**
*                  IMPORTANT NOTICE
*  Google stopped its FREE TIER for Directions service.
*  Hence the below route calculation will not work unless you provide your own key with directions api enabled
*
*  Meanwhile, for the sake of demo, precalculated value will be used
*/
// mock directions api
mockDirections() {
const locationArray = locationData.map(
l => new google.maps.LatLng(l[0], l[1])
);
this.line = new google.maps.Polyline({
strokeOpacity: 0.5,
path: [],
map: this.map
});
locationArray.forEach(l => this.line.getPath().push(l));
const start = new google.maps.LatLng(51.513237, -0.099102);
const end = new google.maps.LatLng(51.514786, -0.080799);
const startMarker = new google.maps.Marker({
position: start,
map: this.map,
label: "A"
});
const endMarker = new google.maps.Marker({
position: end,
map: this.map,
label: "B"
});
this.initRoute();
}
// initialize travel marker
initRoute() {
const route = this.line.getPath().getArray();
// options
const options: TravelMarkerOptions = {
map: this.map, // map object
speed: 50, // default 10 , animation speed
interval: 10, // default 10, marker refresh time
speedMultiplier: this.speedMultiplier,
markerOptions: {
title: "Travel Marker",
animation: google.maps.Animation.DROP,
icon: {
url: "https://i.imgur.com/eTYW75M.png",
// This marker is 20 pixels wide by 32 pixels high.
animation: google.maps.Animation.DROP,
// size: new google.maps.Size(256, 256),
scaledSize: new google.maps.Size(128, 128),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(53, 110)
}
}
};
// define marker
this.marker = new TravelMarker(options);
// add locations from direction service
this.marker.addLocation(route);
this.map.setCenter(this.marker.getPosition()); <---HERE (initialize center of map)
setTimeout(() => this.play(), 2000);
}
// play animation
play() {
this.marker.play();
}
// pause animation
pause() {
this.marker.pause();
}
// reset animation
reset() {
this.marker.reset();
}
// jump to next location
next() {
this.marker.next();
}
// jump to previous location
prev() {
this.marker.prev();
}
// fast forward
fast() {
this.speedMultiplier *= 2;
this.marker.setSpeedMultiplier(this.speedMultiplier);
}
// slow motion
slow() {
this.speedMultiplier /= 2;
this.marker.setSpeedMultiplier(this.speedMultiplier);
}
initEvents() {
this.marker.event.onEvent((event: EventType, data: TravelData) => {
console.log(event, data);
this.map.setCenter(this.marker.getPosition());  <--- Here (updates center of map)
});
}
}