angular - 在经纬度角 bingmap 周围画圆

问题描述

我已经使用 angular-map 包将 bing 地图与 angular 集成，现在想要在给定的纬度和经度周围绘制圆圈。为了实现这一点，我使用了以下 npm 包

npm install --save angular-maps

npm install --save bingmaps

npm install --save @types/bingmaps

npm install --save async@2.5.0

npm install --save 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>

问题陈述：无法在地图标记周围画圈

标签： angulartypescriptdictionary

angular - 在经纬度角 bingmap 周围画圆

问题描述

解决方案

推荐阅读