为什么我不能在我的地图上添加图钉 Google Map API答案

【问题标题】：Why cant i Add a pin to my map Google Map API为什么我不能在我的地图上添加图钉 Google Map API
【发布时间】：2022-11-11 21:07:23
【问题描述】：

这是我用于添加图钉的打字稿代码，我遵循教程并阅读了其他 stackoverflow 问题，但是没有人可以看到我做错了什么或我缺少什么？

TS：

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

@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  center: google.maps.LatLngLiteral = { lat: 0, lng: 0 };

  options: google.maps.MapOptions = {
    zoomControl: false,
    scrollwheel: true,
    disableDoubleClickZoom: true,
    mapTypeId: 'roadmap',
    // disableDefaultUI: true,
    zoom:14,
    // styles: [                   //Hides Landmarks
    //   {
    //     featureType: 'poi',
    //     stylers: [{ visibility: 'off' }],
    //   },
    // ],
  };


  ngOnInit() {
    navigator.geolocation.getCurrentPosition((position) => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
    });
    const map = new google.maps.Map(document.getElementById('map'), {
          center: { lat: 53.280040911392774, lng: -9.010356288290776 },
          zoom: 14,
      });

    // const myLatLng = { lat: 53.280040911392774, lng: -9.010356288290776 };

    const marker = new google.maps.Marker({
      position: { lat: 53.280040911392774, lng: -9.010356288290776 },
      title: "PARK",
    });
    marker.setMap(map);
  }
}

HTML：

<div class="area">
  <div class="position">
    <google-map
      height="60vh"
      width="100%"
      [center]="center"
    ></google-map>
  </div>
</div>
<div id="map"></div>

地图：（标记应在中心）

【问题讨论】：

标签： angular typescript google-maps google-api

【解决方案1】：

好像没有添加地图标记里面的元素谷歌元素。以下是它的外观示例：

html

<google-map 
    height="100%" 
    width="100%" 
    [center]="center" 
    [zoom]="zoom" 
    [options]="options">
    <map-marker  
        [position]="center" 
        [options]="markerOptions">
    </map-marker>
</google-map>

.ts

zoom = 10;
  center: google.maps.LatLngLiteral;  // set this equal to position and give both to marker and map
  options: google.maps.MapOptions = {
    mapTypeId: 'hybrid',
    zoomControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: true,
    maxZoom: 18,
    minZoom: 6,
  };
  pos = { lat: -34.075023, lng: 18.844073 };  // position of the map and the marker
  markerOptions = { animation: google.maps.Animation.DROP };

【讨论】：