각도 4 및 Google지도로 여러 마커 설정

Question

안녕하세요 모두 도움이 필요합니다. Google지도 구성 요소에 여러 마커를 각도 4로 설정하는 데 도움이 필요합니다.이 코드로 표시 할 단일 마커를 얻을 수 있습니다.

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 
      } 
     ] 
    } 

Answer 1

은 당신이 당신의 locations 배열에 액세스 할 수 있습니다로, 당신은 그것을 통해 거기에서 루프는 마커 각을 만들 수 있습니다. 당신이 당신의 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's official documentation

희망과지도에 데이터를 가져 오기에 대한 자세한 내용을 배울 수 있습니다!