Question

我已使用angular-map软件包将bing映射与角度集成，现在想在给定的纬度和经度周围绘制圆。为此，我使用了以下npm软件包

npm install-保存角度图

npm install-保存bingmaps

npm install --save @ types / bingmaps

npm install-保存async@2.5.0

npm install-保存json-loader

代码： app.component.ts

import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from 'src/app/service/local-storage.service';
import { LOCATION_INITIALIZED } from '@angular/common';
import { TranslateServiceService } from 'src/app/service/translate-service.service';

import {
  MapModule, MapAPILoader, MarkerTypeId, IMapOptions, IBox, IMarkerIconInfo, WindowRef, DocumentRef, MapServiceFactory,
  BingMapAPILoaderConfig, BingMapAPILoader,
  GoogleMapAPILoader, GoogleMapAPILoaderConfig
} from 'angular-maps';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'rj';
  lat: string;
  long: string;
  constructor(
    private localStorageService: LocalStorageService,
    private translateServiceService: TranslateServiceService) {

  }
  ngOnInit(): void {
    this.lat = '18.5204';
    this.long = '73.8567';
    this.checkLanguagePerferences();
  }
  checkLanguagePerferences() {
    const language = this.localStorageService.getLanguage();
    if (language) {
      this.translateServiceService.selectLangulage(language);
    }
  }





  _markerTypeId = MarkerTypeId;
  _options: IMapOptions = {
    disableBirdseye: false,
    disableStreetside: false,
    navigationBarMode: 1,
    showBreadcrumb: true,
    // zoom: 10
  };

  _box: IBox = {
    maxLongitude: null,
    maxLatitude: null,
    minLatitude: 20,
    minLongitude: 64
  };
  // ****************************************************
  public _iconInfo: IMarkerIconInfo = {

    markerType: MarkerTypeId.RoundedImageMarker,
    url: 'https://cdn3.iconfinder.com/data/icons/flat-icons-web/40/Location-512.png',
    size: { width: 40, height: 40 },
    markerOffsetRatio: { x: 0.5, y: 0.5 }
  };

  _click() {
    console.log("hello world...");
  }
}

App.component.html

 <i class="fa"></i>
            <div style="height: 600px" class="col-sm-6 col-md-6 col-lg-6">
              <x-map #xmap [Options]="_options">
                <x-map-marker 
                  [Latitude]=lat 
                  [Longitude]=long
                  [Title]="'My Marker'"
                  [IconInfo]="_iconInfo">
                    <x-info-box
                      [DisableAutoPan]="true"
                      [Description]="'Hi, this is the content of the <strong>info window</strong>. It is your responsibility to implement functionality such as close, etc...'">
                        <x-info-box-action [Label]="'Click Me'" (ActionClicked)="_click()"></x-info-box-action>
                    </x-info-box>
                </x-map-marker>
              </x-map>
            </div>

问题陈述：无法在地图标记周围绘制圆圈

Answer 1

在撰写本文时，官方的“角度地图” npm site表示不支持直接绘制圆。

在此conversation中，建议使用本机 Microsoft.Maps.SpatialMath.getRegularPolygon 创建多边形，然后将其解析为 ILatLong 数组，然后将其传递到 x-map-polygon 标签上的 [路径] 。

很抱歉，没有为该问题提供直接解决方案。如果您已经找到其他解决方案，请告诉我们。

绘制圆周围的经纬度成角度的映射图

1 个答案: