使用 Angular 6 打开街道地图 - 向地图添加标记答案

【问题标题】：Open Street Maps with Angular 6 - Add a marker to map使用 Angular 6 打开街道地图 - 向地图添加标记
【发布时间】：2019-11-08 19:45:19
【问题描述】：

基于post，我创建了一个 OSM 层组件。现在我想为目标地理位置添加一个图钉/标记。有人已经这样做了吗？

【问题讨论】：

标签： typescript angular6 openstreetmap

【解决方案1】：

创建一个组件（例如称为“地图”）。
map.component.html：

<div id="map" class="map" style="height:500px"></div>

map.component.ts:

import { Component, OnInit } from '@angular/core';

declare var ol: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class PrincipalComponent implements OnInit {

  constructor() { }

  latitude: number = -16.509418;
  longitude: number = -68.124151;

  ngOnInit() {
    this.map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([this.longitude, this.latitude]),
        zoom: 12
      })
    });
    this.addPoint(this.latitude, this.longitude);
  }

  setCenter() {
    var view = this.map.getView();
    view.setCenter(ol.proj.fromLonLat([this.longitude, this.latitude]));
    view.addMarker(ol.proj.fromLonLat([this.longitude, this.latitude]));
    view.setZoom(12);
  }

  addPoint(lat: number, lng: number) {
    var vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857')),
        })]
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 0.5],
          anchorXUnits: "fraction",
          anchorYUnits: "fraction",
          src: "assets/img/my-icon.png"
        })
      })
    });
    this.map.addLayer(vectorLayer);
    }
}

【讨论】：