Javascript 使用Angular 4和google地图设置多个标记

大家好，在Angular 4中为google地图组件设置多个标记需要帮助。我可以得到一个标记来显示这个代码

 ngOnInit() {
    const myLatlng = new google.maps.LatLng(40.748817, -73.985428);
    const mapOptions = {
        zoom: 13,
        center: myLatlng,
        scrollwheel: false

    };
    const map = new google.maps.Map(document.getElementById('map'), mapOptions);
    const Marker = new google.maps.Marker({
        position: myLatlng,
        title: 'Hello World!'
    });
    // To add the marker to the map, call setMap();
    Marker.setMap(map);


}

如何修改此选项以显示多个位置。我在JSON中有如下位置

    {
        "locations": [
            {
                "_id": "59eb784fa8e0be0004fb466e",
                "updatedAt": "2017-10-21T16:39:43.338Z",
                "createdAt": "2017-10-21T16:39:43.338Z",
                "latitude": "0.2346285",
                "longitude": "32.4352628",
                "locationName": "Prime warehouse A",
                "locationInfo": "Kampala Warehouse #001",
                "__v": 0
            },
            {
                "_id": "1568eb54560be000456466e",
                "updatedAt": "2018-10-21T16:39:43.448Z",
                "createdAt": "2016-09-11T16:39:43.338Z",
                "latitude": "4.3346285",
                "longitude": "32.4352628",
                "locationName": "Prime warehouse A",
                "locationInfo": "Kampala Warehouse #001",
                "__v": 0
            }
        ]
    }

---

只要您可以访问

位置

数组，就可以在其中循环并从中创建一个标记

如果您将所有内容都放在

ngOnInit

函数中，下面是一个示例：

ngOnInit() {
  let map;
  const locations; // if you have your locations hard-coded, else just make sure it's accessible

  const myLatlng = new google.maps.LatLng(40.748817, -73.985428);
  const mapOptions = {
    zoom: 13,
    center: myLatlng,
    scrollwheel: false

};

  map = new google.maps.Map(document.getElementById('map'), mapOptions);


  // loop through each object of your locations array
  for (let location in locations) {

    // The marker's position property needs an object like { lat: 0, lng: 0 };
    // Number(location.latitude) is there to convert the string to a number, but if it's a number already, there's no need to cast it further.
    let latLng = {lat: Number(location.latitude), lng: Number(location.longitude)};

    // Set the position and title
    let marker = new google.maps.Marker({
      position: latLng,
      title: location.locationName
  })

    // place marker in map
    marker.setMap(map)
  }
}

您可以使用了解有关将数据导入地图的更多信息

---

希望有帮助

只要您可以访问

位置

数组，就可以在其中循环，并从中分别创建一个标记

如果您将所有内容都放在

ngOnInit

函数中，下面是一个示例：

ngOnInit() {
  let map;
  const locations; // if you have your locations hard-coded, else just make sure it's accessible

  const myLatlng = new google.maps.LatLng(40.748817, -73.985428);
  const mapOptions = {
    zoom: 13,
    center: myLatlng,
    scrollwheel: false

};

  map = new google.maps.Map(document.getElementById('map'), mapOptions);


  // loop through each object of your locations array
  for (let location in locations) {

    // The marker's position property needs an object like { lat: 0, lng: 0 };
    // Number(location.latitude) is there to convert the string to a number, but if it's a number already, there's no need to cast it further.
    let latLng = {lat: Number(location.latitude), lng: Number(location.longitude)};

    // Set the position and title
    let marker = new google.maps.Marker({
      position: latLng,
      title: location.locationName
  })

    // place marker in map
    marker.setMap(map)
  }
}

您可以使用了解有关将数据导入地图的更多信息

---

希望有帮助

我似乎得到了一个

错误参考错误：google没有在ngOnit上定义
，地图也没有加载。Kay通过使用setTimeOut函数简单地添加15秒的延时来修复这个错误
ngOnInit（）{setTimeout（（）=>{this.loadMap（）；}，1500）；}
然后将其余代码移到loadMap函数中。它现在可以完美地工作。谢谢你的帮助@henrisycip很高兴你成功了。如果我的回答帮助了你，请考虑接受它，这样别人也能从中学习。谢谢最好再发布一个关于这个的问题，让更多的人参与进来。一种策略是不重新加载画布，只需清除标记并在地图上再次设置它们。
for（让位置在位置中）{
for（让位置在位置中）是错误的{
我似乎得到了一个
错误引用错误：google没有在ngOnit上定义，地图也没有加载。可以通过使用setTimeOut函数简单地添加15秒的时间延迟来修复这个错误。
ngOnInit（）{setTimeOut（（）=>{this.loadMap（）；}，1500）；}然后把剩下的代码移到一个Load Mulk函数中。它现在工作得很好。谢谢你的帮助。HyryyCypCy很高兴你能用它。如果我的答案对你有帮助，请考虑接受它，以便其他人也能从中学习。谢谢。不要重新加载画布，只需清除标记并在地图上再次设置它们。
for（let location in locations）{
应该是错误的：
for（let location of locations）{