如何在angular google地图中获取center_changed经纬度
在Angular Google地图中获取center_changed事件的经纬度可以通过以下步骤实现：
- 首先，确保已经在Angular项目中引入了Google地图的相关库和模块。可以使用
@agm/core库来集成Google地图到Angular应用中。 - 在组件的HTML模板中，添加一个
agm-map元素，并设置[ (centerChange)]属性来监听地图的center_changed事件。示例代码如下：
<agm-map [latitude]="lat" [longitude]="lng" [ (centerChange)]="onCenterChange">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>- 在组件的TypeScript文件中，定义
lat和lng变量来存储地图的中心点经纬度。同时，实现onCenterChange方法来获取center_changed事件的经纬度。示例代码如下：
import { Component } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent {
lat: number;
lng: number;
onCenterChange(event: any) {
this.lat = event.lat;
this.lng = event.lng;
console.log('经度：', this.lng);
console.log('纬度：', this.lat);
}
}在onCenterChange方法中，可以通过event.lat和event.lng获取到center_changed事件的经纬度，并将其赋值给lat和lng变量。
这样，当地图的中心点发生变化时，onCenterChange方法会被调用，并打印出经纬度信息。
关于Angular Google地图的更多详细信息和使用方法，可以参考腾讯云提供的相关产品：腾讯云地图（Tencent Maps）。
相关·内容
2回答
将按钮添加到google地图中Angular2
angular、google-maps、typescript、angular2-google-maps
我是新的角度和有一个网页应用程序，显示全屏幕谷歌地图。我想添加一个“注销”按钮到谷歌地图布局(而不是作为标题)。
我知道在javascript Google Maps Api中，有可能像：
var Logout = document.getElementById('Logout');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(Logout);
但是有了，我就找不到怎么做了。
现在我知道了：
map.component.html
<button id="Logout" [(ngModel
浏览 5提问于2017-10-17得票数 5
回答已采纳
1回答
在角4中集成角Google映射:页面重新加载错误
angular、angular-google-maps
我工作的角度4和角谷歌地图。
我遵循中的说明，但是每次在地图视图上重新加载页面时，我都会得到错误：You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
这是我的代码的实现：
map.component.html
<div class="container">
<agm-map [latitude]="lat" [longitude]="lng">
&
浏览 2提问于2017-08-24得票数 0
1回答
当agm-map在组件中时，则不呈现map。
angular、google-maps
目标
我试图在我自己的<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
1回答
如何在agm中的特定位置自动放大我的地图。请注意，所有标记都非常接近
angular、maps、angular-google-maps
标记的屏幕截图：
这是我需要的输出：
这是我的mapcomponent.html示例代码
<div id="wide">
<div *ngIf="isDataLoaded">
<agm-map [latitude]="lat" [longitude]="lng" #gm (mapClick)="closeInfoWindow(infoWindow,gm)" (mapReady)="abc($event)">
<a
浏览 0提问于2018-10-19得票数 0
1回答
如何使用角google地图显示多个标记角6
angular
我试图在谷歌地图上显示2个标记。但我不知道该怎么做。我只能在地图上看到一个标记。
这是我的map.component.html文件：
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng">
</agm-marker>
</agm-map>
这是我的map.component.ts文件：
import { Component, OnInit } from &
浏览 1提问于2018-08-08得票数 1
2回答
如何在<agm-map>角4中使用鼠标
angular、typescript、angular2-services
我正在使用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
回答已采纳
1回答
我应该在我的.ts代码中添加什么才能使agm-info-window工作？
angular、infowindow、angular-google-maps
我正在尝试为地图上的标记创建一个信息窗口。如果没有<agm-info-window>，应用程序仍然可以正常工作，但添加它后，甚至地图都不会显示出来。下面是我试图使之工作的代码，但显然有一些我遗漏或不理解的东西。我似乎不能自己弄清楚细节，因为我对angular还很陌生。任何帮助都将不胜感激。 下面是我的.ts代码： import { Observable, ReplaySubject, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { MarkerLa
浏览 10提问于2019-01-28得票数 0
1回答
未能在页面中显示地图
angular、google-maps
我正在跟踪错误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
回答已采纳
1回答
如何将地图的高度确定为4角的屏幕大小
css、angular
我正在创建谷歌地图使用角谷歌地图组件。我想要谷歌地图到我的屏幕大小。我试过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回答
如何在Angular中刷新谷歌地图？
javascript、angular、typescript、google-maps
我需要刷新谷歌地图，每次我按下“显示”按钮，更改lat和lng。 我正在使用谷歌地图的AGM。 这里我得到了我想在地图上看到的lat和lng： onShow(_token: string) {
var find = this.model.find(({ token }) => token === _token);
this.postsService.setLat(find.lat);
this.postsService.setLng(find.lng);
console.log(
this.po
浏览 19提问于2020-08-27得票数 1
1回答
角谷歌地图mapClick()事件不起作用
angular、maps、google-maps-markers
使用角谷歌地图 (AGM)，我试图添加一个新的标记时，地图被点击。为此，我添加了一个事件mapClick，它将向addMarker方法发送带有坐标的事件。
<agm-map [latitude]="location.latitude" [longitude]="location.longitude" (mapClick)="addMarker($event.coords.lat, $event.coords.lng)">
<agm-marker [latitude]="location.latitude" [lo
浏览 6提问于2020-09-09得票数 6
回答已采纳
2回答
如何在引导模态角4中正确显示google地图
twitter-bootstrap、angular、google-maps、typescript
我工作的角度4和AGM 我想显示的地图，但它只显示我在图像中，如果我删除它从模态，它显示完美，这将是正确的工作方式？
图中显示：
Html代码：
<a class="btn btn-warning btn-flat" href="#modalMap" data-toggle="modal"><i class="fa fa-lg fa-map"></i></a>
<!-- Modal content-->
<div class=
浏览 0提问于2017-08-02得票数 4
回答已采纳
我正在使用
我想在我的@Component中使用
import { Component } from '@angular/core';
import { MarkerManager } from '@agm/core';
@Component({
selector: 'ngx-gmaps',
providers: [MarkerManager],
styleUrls: ['./gmaps.component.scss'],
template: `
<nb-card>
<nb-
浏览 0提问于2018-03-22得票数 1
4回答
如何添加多个标记角谷歌地图？
angular、google-maps
我使用了npm安装@agm/core中的@agm/core模块
这是我的密码
<agm-map [latitude]="lat" [longitude]="lng" >
<agm-marker *ngFor="let data of rooms"[latitude]="data.lat_long[0].lat" [longitude]="data.lat_long[0].long"></agm-marker>
</agm-map>
而这个component.ts
ex
浏览 3提问于2018-01-09得票数 2
回答已采纳
2回答
标记不随实时纬度和经度角度移动google地图
angular、angular-google-maps
我试图在我的角度谷歌地图实时移动标记，但它不是updating.it只获得第一次静态数据，然后它不工作我搜索了谷歌，但没有工作的me.Here是我的app.component.ts，
export class AppComponent {
title = "app";
lat: number = 33.738045;
lng: number = 73.084488;
constructor() {
let eventSource = window["EventSource"];
var urlToChangeStream ="http://192.168
浏览 0提问于2018-01-04得票数 0
2回答
角5谷歌地图:只显示半径#公里内的标记
angular、google-maps
我目前正在我的应用程序中绘制一张地图。我用的是令人惊奇的角度agm软件包。
目标是显示一张带有标记的地图。这些标记来自数据库，包含纬度和经度值。我有数以百计的标记，我想过滤那些。我只想显示在距离我的位置5公里以内的标记。我该怎么做？我查看了包的API文档，但没有看到解决方案。有人能帮我吗？
Map.component.html
<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map
浏览 2提问于2018-06-17得票数 1
回答已采纳
1回答
如何在谷歌地图上显示多个位置
angularjs、ionic-framework、ionic2
我试图在google地图上显示我的应用程序中的多个位置，但我只能显示一个位置，如何显示多个位置？
page.html
<agm-map [latitude]="lat"[longitude]="lng" [zoom]="15"
[zoomControl]="false">
<agm-marker *ngFor="let location of tracks" [latitude]="tracks.lat" [longitude]="tr
浏览 4提问于2017-07-18得票数 1
回答已采纳
1回答
如何显示google坐标
angularjs、google-maps、ionic-framework
我想根据我从getLocation获得的值来显示位置，但是如果我赋值，例如this.lat=25.7777，this.lng=26,777，我得到的只是一个蓝屏；但是如果a不喜欢这个this.lat=this.LAT；this.lng=this.LNG，它就不会显示；而且它可以很好地工作l想要提到的最后一件事l想要提到的是数据库中的数据类型是double，并且我还尝试测试了一个文本
lat:number;
lng:number;
LAT:any;
LNG:any;
constructor(public dataservice:DataService,private geo
浏览 2提问于2017-07-18得票数 0
2回答
错误:未知(承诺)：TypeError:无法读取未定义的属性“nativeElement”
angular、typescript、google-maps
我得到了以下错误:错误: Uncaught (承诺)：TypeError:无法读取未定义的属性'nativeElement‘。
当我试图添加带有ngIf的div和google地图中时，就会发生这种情况：
HTML：
<div class="form-group">
<label>Location by map?</label>
<mat-select formControlName="ubication" [(ngMo
浏览 0提问于2019-09-03得票数 1
回答已采纳
1回答
角:无法读取组件变量中空值的属性“setLng”
javascript、angular
我对棱角很陌生，我想问一下为什么我会遇到Cannot read property 'setLng' of null？
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent i
浏览 1提问于2018-03-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
