使用agm库在Angular 2中创建多边形
在Angular 2中使用agm库创建多边形，可以通过以下步骤实现：
- 首先，确保你的Angular项目已经安装了agm库。可以通过运行以下命令来安装agm库：
- 首先，确保你的Angular项目已经安装了agm库。可以通过运行以下命令来安装agm库：
- 在你的Angular组件中，导入agm库的必要模块和依赖项。例如，在你的组件文件的顶部添加以下代码：
- 在你的Angular组件中，导入agm库的必要模块和依赖项。例如，在你的组件文件的顶部添加以下代码：
- 在组件类中，定义多边形的坐标点数组。例如，你可以在组件类中添加以下代码：
- 在组件类中，定义多边形的坐标点数组。例如，你可以在组件类中添加以下代码：
- 在组件的HTML模板中，使用agm-map指令来显示地图，并使用agm-polygon指令来创建多边形。例如，你可以在模板中添加以下代码：
- 在组件的HTML模板中，使用agm-map指令来显示地图，并使用agm-polygon指令来创建多边形。例如，你可以在模板中添加以下代码：
- 在上面的代码中，
[latitude]和[longitude]属性用于设置地图的中心点坐标，[zoom]属性用于设置地图的缩放级别，[paths]属性用于指定多边形的坐标点数组。 - 最后，确保在你的Angular模块中导入和配置agm库。例如，在你的模块文件中添加以下代码：
- 最后，确保在你的Angular模块中导入和配置agm库。例如，在你的模块文件中添加以下代码：
- 在上面的代码中，
YOUR_GOOGLE_MAPS_API_KEY应该替换为你自己的Google Maps API密钥。
这样，你就可以使用agm库在Angular 2中创建多边形了。请注意，agm库是一个用于集成Google Maps的Angular库，因此在使用时需要提供有效的Google Maps API密钥。关于agm库的更多信息和其他功能，请参考腾讯云的相关产品和产品介绍链接地址。
相关·内容
1回答
我正在使用Angular Google Maps和使用AGM-POLYGON的agm-drawing-manager绘图管理器 现在有两个问题，一个是不能在内部处理多个多边形 <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom" class="cardMapH" #agmMap>
<agm-polygon [paths]="pathsOfPoly"></
浏览 24提问于2019-03-18得票数 0
1回答
问题描述
我使用库的角度网站，其中包含地图的能力，用户选择地图上的地址，以获得他们的订单。
电流行为
我的问题是，当我在地图上添加一个多边形时，标记不能出现在用多边形显示的区域上。但是我可以在多边形外添加标记。
期望/期望行为
最后，我需要在那个区域加上一个标记，它用多边形显示。
Html代码：
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="14" (mapClick)="addMarker($event)">
<agm-polygon [paths]
浏览 2提问于2018-02-26得票数 3
回答已采纳
1回答
我正在尝试使用angular 2 库创建一个多边形。模板附在下面：
<div id="google_map" [@cardtable2]>
<sebm-google-map #maps [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
<sebm-google-map-marker
浏览 4提问于2017-08-01得票数 2
2回答
我正在使用Angular Google Maps库，并尝试在单击地图上的多边形对象时弹出一个agm-snazzy-info-window组件。我尝试在的“使用带有标记的指令”部分对其进行建模
<agm-map [fitBounds]="mapData.bounds">
<agm-polygon *ngFor="let polygon of mapData.polygons" [paths]="polygon.points">
<agm-snazzy-info-window>
浏览 1提问于2017-09-30得票数 0
1回答
我在Range7中创建了一个组件库，它将被移植到其他应用程序中，而这些应用程序将能够使用这些组件。
我遇到了一个问题，在组件库中安装了一个角库，但是没有绑定到组件库中以供在另一个应用程序中使用，最后会出现这样的错误.
Module not found: Error: Can't resolve '@angular/material' in
'C:\Source\MappingServices\GIT\repos\SomeFolderStructure\node_mo
dules\@myComp\components\fesm5'
ERROR in
浏览 1提问于2019-03-05得票数 0
1回答
编辑:我为这个添加了stackblitz。这是我的第一次，所以我希望它能工作。 https://stackblitz.com/edit/angular-dlabgk 我已经使用谷歌地图好几年了，最近我把每个地图都迁移到了AgmMaps。最近我在地图上看到了一些关于多边形绘制的问题，我想创建一个非常简单的演示。我将这个添加到了一个工作地图项目中： <agm-polygon [strokeColor]="'red'" [strokeWeight]="4" [paths]="polygonPts">
</agm-po
浏览 7提问于2020-02-03得票数 0
回答已采纳
1回答
我是使用角agm，需要绘制一个多边形后，点击一个标记。
<agm-map [latitude]="latitude"
[longitude]="longitude"
[zoom]="zoom">
<agm-marker *ngFor="let item of items; let i = index"
[latitude]="item.Latitud"
[longitude]="item.Lo
浏览 0提问于2019-11-22得票数 0
回答已采纳
1回答
<div *ngFor="let p of polys">
<agm-polygon #cmp [paths]="$any(p.getPath()).i" [fillColor]="'blue'" [draggable]="true" [editable]="true"
[polyDraggable]="true" (polyPathsChange)="polytest($event,p)">
&
浏览 15提问于2020-08-24得票数 2
我可能在某个地方遇到了问题，但在我的地图上使用@agm-core组件绘制多边形是不可能的。 地图显示良好且配置良好。它会显示出来。 我的多边形点数组是(就像在控制台中写的那样)： markers: [{"lat":44.841225,"lng":-0.580036},
{"lat":44.842236,"lng":-0.64696},
{"lat":44.805615,"lng":-0.63084},
{"lat":43.248627,"lng":5.392345}
浏览 9提问于2019-05-29得票数 0
1回答
背景：
大家好，在过去的几天里，我一直在为谷歌地图(AGM) API而奋斗。我正在构建一些非常简单的东西，我有一个坐标列表(经度和纬度)，我传递给AGM指令，一切正常工作，我能够看到地图上的点，查看图像(线图像和多边形图像)：
线图像：
多边形图像：
这是我的角码，用来显示线和多边形。
<agm-map #agmMap class="d-agm-map-container" [zoom]="zoom" [latitude]="latitude" [longitude]="longitude">
<
浏览 3提问于2018-09-04得票数 1
1回答
我正在使用AGM (angular google地图)库使用angular。我不知道如何让每个标记的信息窗口内容不同。我希望每个标记都有自己的弹出信息。这是我的component.html：
<div class ="content">
<h2>Popular Locations around InComm</h2>
<agm-map>
[latitude]="latitude"
[longitude]="longitude"
[zoom]="zoom"
浏览 19提问于2020-05-09得票数 0
在我的应用程序中，我使用角谷歌地图(AGM)来构建地图。我如何在上面画一个多边形？我遵循了中描述的解决方案，但是缺少一些指令。如何在AGM地图上启用绘图管理器并绘制示例中的多边形？
这是app.module中的导入：
AgmCoreModule.forRoot({
apiKey: 'key',
language: localStorage && localStorage.defaultLang || 'el',
libraries: ['places', 'drawing&#
浏览 0提问于2019-02-12得票数 3
1回答
我正在开发一个角组件库，自从更新到角13之后，我们在库的npm i @our/library@14.1.1-beta.1过程中出现了一些错误：
npm ERR! While resolving: test-app@0.0.0
npm ERR! Found: @angular/common@13.2.7
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.2.0" from the root project
npm ERR!
npm ERR! Could not resolve depend
浏览 9提问于2022-03-18得票数 2
1回答
单击clear按钮时，如何从地图中清除多边形。 <agm-map [latitude]="40.034989"
[longitude]="29.062844"
[zoom]="15"
[agmDrawingManager]="drawing"
class="full-width-height">
<agm-drawing-manager #drawing="agmDrawingManager"
浏览 20提问于2020-01-07得票数 1
2回答
当多边形被编辑和拖动时，我正在尝试获取更新后的多边形路径。我试着像下面的代码那样做。
在我的打字稿中：
@ViewChild(AgmPolygon) polygon: any;
this.polygon.getPaths().then((x: any[]) => {
x.forEach(y => {
console.log('-');
y.forEach(z => console.log(z.lat(), z.lng()));
});
});
我使用了下面的链接，也是 。
在我的html中：
<agm-map [la
浏览 5提问于2017-11-06得票数 17
我在使用AGM (Angular Google Maps)时遇到了问题，AGM版本与angular v4.3不兼容。当我更新AGM新版本时，它使我的代码(Angular)有很多问题(代码错误)。我一直在尝试寻找另一个解决方案来解决谷歌地图在Angular中的问题。
对于兼容Angular 4.3的Google Maps，您有什么想法或解决方案吗？从Google Maps中，我需要搜索地点并获取经度和纬度。
浏览 8提问于2018-09-05得票数 0
我正在尝试在我的项目中添加AGM角谷歌地图( Angular4 )
以下指南：
使用agm组件访问页面时遇到的错误：
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has '
浏览 5提问于2017-05-14得票数 22
回答已采纳
我使用的是@agm/核心库和角7中的几个包。但是我得到了错误：
WARNING in ./node_modules/@agm/core/fesm5/agm-core.js 4538:34-52
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
WARNING in ./node_modules/ngx-bootstrap-slider/fesm5/ngx-bootstrap-slider.js 7:38-56
"export 'ɵɵdefineInjectable
浏览 3提问于2021-02-04得票数 0
回答已采纳
我试图在我的角度项目中使用，但是这个错误出现了，agm-map不是一个已知的元素。
我的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';
import { NavBarCo
浏览 1提问于2018-01-27得票数 3
我正在尝试在我的项目中使用agm来自动竞争表单字段。我只是使用命令npm install @agm/core安装，在app.module中，我在导入中添加了AgmCoreModule。我没有使用任何与agm相关的代码，保存了项目，运行了ng serve并得到了这个错误。
agm-core.js:4538 Uncaught TypeError: Object(...) is not a function
at agm-core.js:4538
at Module.../../node_modules/@agm/core/fesm5/agm-core.js (agm-core.js:4544)
a
浏览 1提问于2019-11-21得票数 8
回答已采纳
我尝试过这些命令
npm install --save-dev @angular/forms@latest,
npm install --save @angular/cdk,
npm install,
npm i @angular/core
但所有这些都没有帮助，我得到了这个错误。有没有什么方法可以导入这些模块？
是否缺少要导入的模块？
我的Angular版本是最新的。
PS C:\Users\Desktop\Projects\AngularATM\ATM-Project> ng serve -o --port 2406
10% building 3/3 modules 0 ac
浏览 13提问于2019-07-15得票数 0
1回答
我正在创建导航抽屉在我的角4应用程序使用角材料。最初，我正在创建一个工具栏，使其具有标题和菜单按钮(mat-图标是菜单)。
这是我的密码
<mat-toolbar class="example-header" color="primary">
<button mat-icon-button><mat-icon>menu</mat-icon></button>
<span class="header-name">Hello</span>
</mat-t
浏览 0提问于2018-04-09得票数 12
回答已采纳
我正在创建谷歌地图使用角谷歌地图组件。我想要谷歌地图到我的屏幕大小。我试过height:100%。但不起作用。有人能告诉我怎么做吗？
我遵循了本教程：
映射：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: '<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker
浏览 1提问于2018-02-09得票数 0
回答已采纳
1回答
我正在使用组件。我用*ngFor在模板中添加了标记。
import { Component, NgModule} from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';
import { AgmCoreModule} from '@agm/core';
import { AgmJsMarkerClustererModule, ClusterManager } from '@agm/js-marker-clusterer;
浏览 1提问于2017-10-25得票数 4
在我的Angular 9应用程序中，我正在使用agm google map，一切都在工作中查找，但是当我导入MouseEvent时，它显示了一个错误(src/app/place/place.component.ts:3:9 - error TS2305: Module '"../../../../../../Projects/Angular/mean2020/node_modules/@agm/core/agm-core"' has no exported member 'MouseEvent'.)，我搜索了它，但没有找到任何适当的解决方案，任
浏览 10提问于2020-09-24得票数 1
我正在使用AGM (Angular Google Maps)，我想创建一组我自己的自定义组件，包装AGM组件，以允许在我的应用程序中高度重用。
然而，当我这样做时，标记(在本例中)似乎没有呈现在地图上，但我没有得到任何错误。我想知道这是否与在<ng-content>中嵌套组件有关
有人能帮上忙吗？我有一个设置。请看底部使用Slot的Angular 7 Stackblitz的更新。
当我嵌套自定义组件时，它创建了一个ng-content 元素中间人，这似乎破坏了agm功能。
我的核心组件是vmap
@Component({
selector: "v-map",
浏览 61提问于2018-10-30得票数 1
我想要绘制一个多边形在谷歌地图的基础上，在输入框中的协调输入。
在输入框中输入一组坐标后，一旦我单击“绘制多边形”按钮，我希望在谷歌地图(Agm map)中绘制一个多边形。
请帮帮忙。
浏览 3提问于2020-09-25得票数 0
我正在尝试将地图添加到我的Angular项目中。使用AGM来实现这一点()。但是我的地图没有显示出来。
app.module.ts：
@NgModule(<NgModule>{
declarations: [
AppComponent,
],
imports: [
BrowserModule,
OrderModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
FormsModule,
MatTab
浏览 1提问于2017-12-20得票数 8
<agm-map
[zoom]="mapConfig.zoom" [styles]="mapConfig.styles"
[latitude]="currLate" [longitude]="currLongi"
>
<agm-direction *ngIf="path"
[origin]="path.origin"
[destination]="path.destin
浏览 11提问于2019-01-25得票数 1
在angular 6中，我使用了agm-polyline的流代码。我想在agm-polyline中添加箭头符号(折线) (https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow)。但编译器显示错误，如Can't bind to 'icon‘，因为它不是’agm-polyline‘的已知属性... <agm-polyline [strokeColor]="color" [icon]="icon" >
浏览 27提问于2019-01-26得票数 3
我刚刚为我的ionic+angular应用程序创建了一个带有地图的组件。
很简单，只需在一个位置显示一个标记：
<ion-header>
<ion-toolbar color="primary">
<ion-title>Spots</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<agm-map [latitude]="lat" [longitude]="lng">
浏览 5提问于2020-10-05得票数 2
1回答
我在angular 4的agm-map中使用了agm-circle。它工作得很好，但问题是当我拖动它时，它移动得太快了。如何让它慢下来。以下是我的代码 <agm-map id="map" [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
<agm-circle
浏览 8提问于2019-01-04得票数 1
回答已采纳
目标
我试图在我自己的<agm-map>组件中包装一个<app-map>，但它甚至不在HTML中呈现。
agm (角谷歌地图)库配置良好，单独使用标记时地图显示良好，但我需要提供自己的组件。
我尝试过的事物
下面是组件模板的代码
map.component.html
<agm-map flex #map [latitude]="latitude" [zoomControl]="true" [longitude]="longitude" [zoom]="zoomLevel" [zoomCon
浏览 6提问于2022-12-02得票数 0
我在angular 4中使用了@agm/core，我想获得两个点之间的方向来在地图上绘制它们，但我不知道怎么做。官方网站上几乎没有文档，我得到的@agm/core的版本是1.0.0-beta.1
HTML代码：
<agm-map>
<agm-polyline>
<agm-polyline-point *ngFor="let coordinate of coordinates"
[latitude]="coordinate.latitude"
[longitude]="coordinate
浏览 4提问于2017-10-10得票数 1
我尝试按照描述的添加AgmMarkerSpiderModule。但是我在编译时得到了这个消息；
/directives/marker-spider.ts:14:24 - error TS2307: Cannot find module '@agm/core/services/google-maps-types' or its corresponding type declarations.
package.json：
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
&
浏览 2提问于2020-12-17得票数 0
1回答
我在angular中使用agm-map来显示地图和标记：
<agm-map #map >
<agm-marker
*ngIf="searchDataService.search"
*ngFor="let store of searchDataService.filteredStores"
[latitude]="store.lat"
[longitude]="store.lon"
(markerClick)='s
浏览 27提问于2020-05-14得票数 0
回答已采纳
1回答
我正在使用这个版本的"@agm/core"："1.0.0-beta.2“。我关心的是如何重新绘制我在google上绘制的多边形，我正在存储纬度和经度，如何重新绘制我的多边形呢？
<agm-map [latitude]="latitudeMapUpdate"
[longitude]="longitudeMapUpdate"
[
浏览 9提问于2020-10-21得票数 0
回答已采纳
2回答
我正在使用AgmMap的地图在角4应用程序。如何在显示信息窗口的agm标记中实现mouseover事件。我需要打开信息窗口标记鼠标悬停。如何将函数onMouseOver中的infowindow实例恢复以打开它？这是我的map.component.html文件
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker *ngFor="let m of markers; let i = index"
[latitude]="m.lat"
浏览 2提问于2017-10-14得票数 4
回答已采纳
我只是尝试更新网站应用程序设计的角，并得到了这个错误。我想我遗漏了一些东西，但我找不到。
"C:\Program Files\nodejs\npm.cmd" install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @agm/core@3.0.0-beta.0
npm ERR! Found: @angular/common@15.0.1
npm ERR! node_modules/@angular/common
npm ERR!
浏览 15提问于2022-11-28得票数 0
1回答
我正在跟踪错误TypeError: Object(.)不是一个函数。
这是MapModule
import { NgModule } from '@angular/core';
import {MapComponent} from './map.component';
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [
MapComponent
],
exports: [
MapComponent
],
import
浏览 0提问于2018-10-09得票数 1
回答已采纳
因此，我试图为创建一个自动填充输入，到目前为止还不错，但是当我将组件(app-agm-input)放置在我的app.component.html中时，我会得到以下错误：
下面是我的组件的样子：
import {
Component,
OnInit,
ViewChild,
ElementRef,
NgZone,
Input
} from "@angular/core";
import { MapsAPILoader } from "@agm/core";
import {} from "@types
浏览 1提问于2018-06-05得票数 0
回答已采纳
我想在AGM地图上实时显示多个标记，此代码仅适用于一个标记。我刚说过要学习编程，所以……并向我推荐一个学习angular的教程。
应用组件：
constructor(public db: AngularFireDatabase){
this.data = db.object('/raw-locations/8290/0').valueChanges();
}
应用程序Html：
<agm-map [latitude]="31.5718289" [longitude]="74.3690473">
<agm-mark
浏览 0提问于2018-03-31得票数 1
1回答
我使用的agm-map与angular 9，当我的页面加载它加粗所有字体。我试着在没有agm-map的情况下测试我的前端，一切正常，但是当我添加特定的行时，它加粗了所有内容，这是我的代码
<mat-card class="example-card">
<agm-map
class="temp"
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
浏览 3提问于2020-08-13得票数 0
在我的angular10应用程序中，我使用agm core来显示google maps。 component.html <agm-map [latitude]="latitude" [longitude]="longitude">
<agm-direction *ngIf="source && dest" [origin]="source" [destination]="dest"></agm-direction>
</agm-map> com
浏览 24提问于2020-12-20得票数 1
回答已采纳
如何移除这个agm-map周围的蓝色边框(见图： )
一旦我点击地图，蓝色的边框就消失了！
我试过：
agm-map {
height: 465px;
width: 600px;
outline: none !important;
}
或
agm-map:focus {
outline: none !important;
}
但这不管用
进一步信息：agm-map放置在angular material modal中
浏览 7提问于2021-03-26得票数 0
Angular google地图agm标记拖动结束事件未返回坐标
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
<agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true"
(dragEnd)="markerDragEnd($event)&#
浏览 11提问于2021-03-03得票数 0
我正在使用Angular5和agm-core来绘制谷歌地图，使用这些代码来绘制折线
<agm-polyline [strokeColor]="path.color"
strokeWeight="2" *ngFor="let path of paths">
<agm-polyline-point *ngFor="let pt of path.points"
浏览 2提问于2018-10-17得票数 0
我正在尝试在Angular Google Maps中获取我的起始地址和目的地地址之间的路点。我有一个数组
waypoints: any
和一种动态添加航点的方法：
addWaypoint($event) { this.waypoints.push({ location: { lat: $event.geoLocation.latitude, lng: $event.geoLocation.longitude}, stopover: true }); console.log(this.waypoint
浏览 0提问于2020-01-14得票数 0
我在一个Angular 4应用程序中工作，在这里我想添加一个地图视图，我已经开发了默认的街景地图。
现在我想为用户添加一个选项，他们可以在街景和卫星视图之间切换。
HTML
<div class="container">
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<agm-marker [latitude]="lat" [longitude]="lng">
&l
浏览 6提问于2018-04-25得票数 0
我使用的是的Angular Google Map。我想在agm-marker元素上使用ngFor指令来显示多个标记。尽管DOM显示所有标记都存在，但UI只显示地图上的第一个标记。
以下是HTML部分：
<agm-map [latitude]="lat" [longitude]="long" [zoom] = 16>
<agm-marker *ngFor="let m of latlongs; let i = index"
[latitude]="m.lat"
[longitude]="m.long"
浏览 2提问于2017-08-13得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
