绘制圆的经纬度角度bingmap

问题描述

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

I have integrated bing map with angular using angular-map package now wants to draw the circle around given latitude and longitude.for achieving this I have used following npm packages

npm install-保存角度图

npm install --save angular-maps

npm install-保存bingmaps

npm install --save bingmaps

npm install --save @ types / bingmaps

npm install --save @types/bingmaps

npm install-保存[email protected]

npm install --save [email protected]

npm install-保存json-loader

npm install --save json-loader

代码：
app.component.ts

code: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

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>

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

Problem Statement:not able to draw circle around map marker

推荐答案

在撰写本文时，是官方的 angular-maps 表示不直接支持绘制圆。

at the moment of writing this, the official 'angular-maps' npm site says that there's no support for drawing circles directly.

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

In this conversation is suggested to use the native Microsoft.Maps.SpatialMath.getRegularPolygon to create the polygon and then parse that to ILatLong array, and pass it to [Paths] on x-map-polygon tag.

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

Sorry for not providing a direct solution for that problem. If you already hit with other solution, please let us know.

这篇关于绘制圆的经纬度角度bingmap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！