在Angular 7中,我们可以使用agm-polyline库将折线添加到地图中。agm-polyline是一个用于在谷歌地图上绘制折线的库。下面是如何在Angular 7中将agm-polyline放入地图中的方法:
npm install @agm/core
npm install agm-polyline
import { AgmCoreModule } from '@agm/core';
import { AgmPolylineModule } from 'agm-polyline';
@NgModule({
imports: [
AgmCoreModule.forRoot({
// 添加谷歌地图API密钥
apiKey: 'your_api_key'
}),
AgmPolylineModule
],
// 其他配置项
})
export class AppModule { }
请将your_api_key
替换为您自己的谷歌地图API密钥。
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<agm-polyline [strokeColor]="'red'" [strokeWeight]="2" [editable]="true"
[visible]="true" [paths]="polylinePaths"></agm-polyline>
</agm-map>
在组件的.ts文件中,定义折线的路径:
export class MyComponent {
lat = 51.678418;
lng = 7.809007;
zoom = 14;
polylinePaths = [
{ lat: 51.678418, lng: 7.809007 },
{ lat: 51.678218, lng: 7.819007 },
{ lat: 51.678018, lng: 7.829007 }
];
}
在上述示例中,我们创建了一个简单的地图,并使用agm-polyline指令将折线添加到地图中。您可以根据需要更改折线的路径、颜色、权重等属性。
推荐的腾讯云相关产品:腾讯地图服务(https://cloud.tencent.com/product/maps)
请注意,由于要求不能提及特定的云计算品牌商,因此无法直接给出这些品牌商的相关产品和链接地址。
领取专属 10元无门槛券
手把手带您无忧上云