标签: angular-google-maps

我正在使用GoogleMap API('angular-google-maps'js包),我有一种非常奇怪的行为.

我第一次加载它时,我会加载完整的地图,就像这里:

然后我关闭对话框并重新打开它,我看到了:

请记住,地图在另一个对话框的顶部显示为对话框.

有任何想法吗？

我目前正在使用它DrawingManager来允许用户在地图上绘制形状.绘制一个形状后,我在多边形的路径上设置了一个监听器,这样我可以在路径改变后做出反应:

var polygonPath = event.overlay.getPath();
google.maps.event.addListener(polygonPath, 'set_at', function () { 
    // my code...
});

当用户使用绘图工具添加新形状时,这非常有用.但是,如果我在数据库中已经使用ui-gmap-polygonAngularJS指令(来自angular-google-maps项目)显示多边形,那么如何监听set_at事件,因为此事件不在多边形上,而是在多边形的路径上(MVCArray))？

我能够set_at在angular-google-maps项目的源代码中找到引用的唯一地方是array-sync.coffee文件,但它看起来并不像是暴露的.

如果我不能set_at直接使用指令来监听事件,我希望有一个事件在指令创建多边形时被触发,这样我就可以获得多边形的路径然后添加一个监听器,就像上面的代码.

我把JSFiddle基本结构和事件对象放在一起.它当前处理多边形的鼠标悬停和鼠标输出,但不处理set_at事件.

我正在开发一个使用离子的移动应用程序,并要求在谷歌地图中显示带有价格标记的地方,如下所示:

我写了一个非常基本的代码来集成谷歌地图和标记.

MapController

controller('MapController', function($scope, uiGmapGoogleMapApi, $log, $timeout, $state) {

    $scope.map = { center: { latitude: 12.9250, longitude: 77.5938 }, zoom: 8, window: { show: false } };
    $scope.options = { scrollwheel: false };

    $scope.markerEvents = {
        events: {
            dragend: function(marker, eventName, args) {
                var lat = marker.getPosition().lat();
                var lon = marker.getPosition().lng();
                $log.log(lat);
                $log.log(lon);

                $scope.marker.options = {
                    draggable: true,
                    labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,
                    labelAnchor: "100 0",
                    labelClass: "marker-labels"
                };
            }
        } …

我的问题有点简单，但我找不到如何解决它。

我将 AngularJS 与 Angular Google Maps 一起使用（https://github.com/angular-ui/angular-google-maps）

我有一个简单的地图，只有一个多边形和一个 KML 图层，它在多边形内显示一个标记。

但我不知道为什么，我无法点击标记。我在地图上放置了两个不同的 KML 图层，因此您可以看到多边形外面的图层可以点击，而里面的第二个图层则不可点击。

你可以看到下面的代码：

'use strict';
angular.module("map", ['uiGmapgoogle-maps'])

.controller("MapController",['$scope', '$http', function ($scope, $http) {
	$scope.map = {
		center: {
			latitude: 48.80913908755741,
			longitude: 3.0915678394317014
		},
		zoom: 12,
		bounds: {}
	};

	$scope.polygons = [{
		id: 1,
		path: [
			{ latitude: 48.825218, longitude: 3.050508 },
			{ latitude: 48.823409, longitude: 3.101664 },
			{ latitude: 48.792885, longitude: 3.111105 },
			{ latitude: 48.793224, longitude: 3.060465 }
		],
		stroke: {
			color: '#584885',
			weight: 2 …

嗨，我有一些角度/引导代码并试图平移到位置。我认为问题出在 GoogleMapsAPI Wrapper 的不同实例中。顺便提一句。缩放和打印圆圈也不起作用。

  constructor(private _service: MapService,
              private route: ActivatedRoute,
              private wrapper: GoogleMapsAPIWrapper) {
  }

  show(measurement: MeasurementDTO) {
    const latlng = new google.maps.LatLng(measurement.latLng.lat, measurement.latLng.lng());
    console.log(latlng.lat);
    this.map.panTo(latlng);
  }

和这里的部分观点。测量来自表，但我认为它是无用的信息。

  <agm-map style="height: 600px" [latitude]="1" [longitude]="1" [usePanning]="true">
    <agm-marker-cluster [imagePath]="'https://googlemaps.github.io/js-marker-clusterer/images/m'">
      <agm-marker
        *ngFor="let measurement of measurements"
        [latitude]="measurement.latLng.lat"
        [longitude]="measurement.latLng.lng">
      </agm-marker>
    </agm-marker-cluster>
  </agm-map>
        <button (click)="show(measurement)">Show</button>

2018 年 12 月 6 日更新

我通过在组件中添加地图来解决这个问题：

  map: any;

  setMap(map) {
    console.log(map);
    this.map = map;
  }

这个 onReady 在 html 中：

<agm-map #mapka style="height: 600px" [latitude]="52.279986" [longitude]="17.35229389999995" [usePanning]="true"
               (mapReady)="setMap($event)">

如何设置样式 agm-marker-label - max-width 以将文本设置为居中？我可以更改标签位置，但不能为集中标签名称设置最小宽度。

<agm-marker *ngIf="school.lat && school.lng" 
                    [iconUrl]="{url: school.mapMarker, scaledSize: {height: 75,width: 48},labelOrigin:{x:70,y:20}}"
                    [label]="{text:school.schoolName}"
                    [longitude]="school.lng | parseFloat"
                    [latitude]="school.lat | parseFloat">
        </agm-marker>

我agm/core在显示地图坐标时使用。我有下面的代码

<agm-map [latitude]="10.3207886" [longitude]="123.90250049999997">
    <agm-marker [latitude]="10.3207886 [longitude]="123.90250049999997"></agm-marker>
</agm-map>

视图是这样的：

但是我想首先展示这样的街道：

怎么做？

getAddress( lat: number, lng: number ) {
    console.log('Finding Address');
    if (navigator.geolocation) {
      let geocoder = new google.maps.Geocoder();
      let latlng = new google.maps.LatLng(lat, lng);
      let request = { latLng: latlng };
      geocoder.geocode(request, (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          let result = results[0];
          let rsltAdrComponent = result.address_components;
          let resultLength = rsltAdrComponent.length;
          if (result != null) {
            this.address = rsltAdrComponent[resultLength - 8].short_name;
          } else {
            alert('No address available!');
          }
        }
      });
  }
  }

我正在尝试在我的 angular 4 应用程序中使用反向地理编码。我正在使用 agm 将谷歌地图与 angular …

我正在使用 AGM（Angular Google Maps）和 OpenLayers。

我需要以编程方式设置我的 AGM 的缩放，但一直无法弄清楚它是如何工作的。

HTML 地图...

<div id="mapWrap" class="mapWrap" style="padding: 0px; width: 100%; height: 
100%; text-align: left">

  <agm-map  
    [latitude]="lat" 
    [longitude]="lng"
    [zoom]="currZoom" 
    [mapTypeId]="mapType" 
    [mapTypeControl]="mapControls" 
    [zoomControl]="mapControls" 
    [streetViewControl]="mapControls" 
  ></agm-map>

  <div id="map" class="map" style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: absolute; opacity: 0.5"></div>
</div>

组件代码

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';
import { GoogleMap } from '@agm/core/services/google-maps-types';

import olMap from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import OSM …

 <agm-map  style="text-shadow: 0px 0px 8.2px yellow; color: red;" [latitude]='latitude'
    [longitude]='longitude' (mapClick)="onChoseLocation($event)" [zoom]=15 [usePanning]="true">
    <agm-marker *ngFor="let vehicle of data1;" [agmFitBounds]="true" 
      [latitude]='vehicle.lat' [longitude]='vehicle.lng' 
      [iconUrl]="{ url: './assets/images/cars.png', scaledSize: { width: 45, height: 45, rotation: vehicle.angle, anchor : {x:19, y:19} }}"
      [label]="{color: 'blue', fontWeight: 'bold', fontSize: '12px', backgroundColor:'red',  text: vehicle.name}">
      <agm-polyline *ngFor="let initialdata of vehicleDetail">
        <agm-polyline-point  [latitude]="initialdata.lat" [longitude]="initialdata.lng">
        </agm-polyline-point>
        <agm-polyline-point *ngIf="(vehicle.id == id)"  [latitude]="vehicle.lat" [longitude]="vehicle.lng">
        </agm-polyline-point>
      </agm-polyline>
      <agm-info-window [disableAutoPan]="true" #infoWindow [isOpen]="true">
        <small>
          Name: <small>{{vehicle.name}}</small> <br>
          Speed: <small>{{vehicle.speed}} km/h </small><br>
          <!-- Lng: <small>{{vehicle.lng}}</small> <br> --> …