javascript - 从数组中绘制谷歌地图中的纬度，经度

Question

我的 Controller 中有以下代码。

    .controller('MapCtrl', ['$scope', 
        function initialize() {
            var myLatlng = new google.maps.LatLng(38.895112, -77.036366);
            var mapOptions = {
               zoom: 12,
               center: myLatlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
            })

                var stop_details = [];
                var places;
                var stops;
                stops = [ "4c3c7a88b9592fffd6f4e00472c432a646907b90", "2bc310e8a6f572072cce83f679ae697e60a12458", "8bb6c452e1288bfbfa09b925b3c218e0cd63533c", "746107e362ab3e262a2ebeeed9652cf80498b9c2" ]

                places = [ {
  "lat" : 38.909769,
  "vicinity" : "1443 P Street Northwest, Washington",
  "formatted_phone_number" : "(202) 299-0018",
  "lng" : -77.033465,
  "reference" : "CnRpAAAAiV-V1LmdPoEFrH_CzMwnEnKP5hKl6yKoABCmCYmbPTlBcCTqDsujnxaxNs3Cz8SpCDunKpwva6vQ1PRSXyz41FV5DDvUJEbmDcZm5upznwUBVkL2BATJl4P4DrAfVgjOctg_fLn7cpP-0V-zaCac9hIQPprVouF0TEkNRX14wHTQNhoU0oaloRoQBbSHBaACpiGmXjFOP7Q",
  "name" : "Commissary",
  "types" : "[\"night_club\",\"cafe\",\"bar\",\"restaurant\",\"food\",\"establishment\"]",
  "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/bar-71.png",
  "formatted_address" : "1443 P Street Northwest, Washington, DC, United States",
  "id" : "8bb6c452e1288bfbfa09b925b3c218e0cd63533c"
}, {
  "lat" : 38.909509,
  "vicinity" : "1460 P Street Northwest, Washington",
  "formatted_phone_number" : "(202) 629-3280",
  "lng" : -77.034281,
  "reference" : "CnRtAAAANK2dl7lzkjTSEjwN8F4e0BBGOsuIry3YcNITADsBXwDukLupR3nHlkoU0f4TfnG2rIxwLYipbQ4RoGsZiDFwluNH56j4GQRJiQhKk804cCKPvc5P0F3D46WPylPTWQ7Prkz9DEqANvHeCKgCi7EEoBIQzM_5VxM4t7H4SmkQdNxrqRoUM-xcvj1l7poiW_5yezPTNZXRxAw",
  "name" : "Tortilla Coast",
  "types" : "[\"restaurant\",\"meal_delivery\",\"food\",\"establishment\"]",
  "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
  "formatted_address" : "1460 P Street Northwest, Washington, DC, United States",
  "id" : "746107e362ab3e262a2ebeeed9652cf80498b9c2"
}, {
  "lat" : 38.909757,
  "vicinity" : "1423 P Street Northwest, Washington",
  "formatted_phone_number" : "(202) 332-3710",
  "lng" : -77.032809,
  "reference" : "CnRqAAAADyayiSEmP4dW7tKV2C2HP0V6J30nV4nDU8h8kOxU3eNqunOP0UoMllbR6vEH8Xb3iu2eW1qd0iXa_EQlPGZorVwVDrmMxV8KtMHTxjgJmUDpJV_UUDWA8GV9M5HpQGWvq1w33fzD73BOEShrFSO7DxIQqExQVJ4jCRD6pZD_Ji7qXxoUuXct0zGzT6slxWXAJlj8QlRA8q8",
  "name" : "Logan Tavern",
  "types" : "[\"restaurant\",\"food\",\"establishment\"]",
  "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
  "formatted_address" : "1423 P Street Northwest, Washington, DC, United States",
  "id" : "4c3c7a88b9592fffd6f4e00472c432a646907b90"
}, {
  "lat" : 38.910879,
  "vicinity" : "1529 16th Street NW, Washington",
  "formatted_phone_number" : "(202) 777-3209",
  "lng" : -77.036261,
  "reference" : "CoQBcQAAAHAr4oVEt3WYvhq1HYtA5hPxhciwtxCc0U_94iUiFt2hi8S2TWZD_JaYOVdwGvi-PPF0Os2j3hPLAo_t0h3mibqTv5IJiWfTtSs1K65aFgptB8wpV4atC6FOLusDg0x6CWSsWDm4OYQuz5C8YDVAgWoKuEzvawomWltmibU4UmBwEhD-P8sraCG-sCJ04iyvh3ehGhRVs1MDaeR9U8RtshLxyyZt71QOcw",
  "name" : "DISTRIKT Bistro LLC",
  "types" : "[\"restaurant\",\"meal_delivery\",\"food\",\"establishment\"]",
  "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
  "formatted_address" : "1529 16th Street NW, Washington, DC, United States",
  "id" : "2bc310e8a6f572072cce83f679ae697e60a12458"
}, {
  "lat" : 38.90973,
  "vicinity" : "1471 P Street Northwest, Washington",
  "formatted_phone_number" : "(202) 234-7336",
  "lng" : -77.034096,
  "reference" : "CnRpAAAA48L4xgdQTHHPsEDegQt7Cz1q0u2EEOvd-UMWg47PkjpXx8i-i_lUI9mi9uMeyiRGSNtPDeQ0b57Igo496lOR2FKsnD_szdFvmruxoTlKhOMEtZP1cHpRVjTvi9d2toPTo0zJgAf5-PyYIL10Q4MgoBIQ0V8EeAEGeMvYZpQYTJHKNBoUQN5getkZjcvmWkqitqXnm9Rb5FA",
  "name" : "Sweetgreen",
  "types" : "[\"store\",\"restaurant\",\"food\",\"establishment\"]",
  "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
  "formatted_address" : "1471 P Street Northwest, Washington, DC, United States",
  "id" : "80c55996d394afda68bfe8afd280a7a5c3813184"
}, {
  "lat" : 38.911535,
  "vicinity" : "1608 14th Street Northwest, Washington",
  "formatted_phone_number" : "(202) 234-2400",
  "lng" : -77.032251,
  "reference" : "CnRiAAAAzDWGK3_M_EaIB0TbjnlvvVyQH_T415oBDvUUKo94LsrN3nndD7sXtSPxhC2J7CFKo7wElysmDzVUClI8TIo5srn2-5LvkerJiKv8lUvlhXotao3HZDHnmw1h8Cfg-13Nf2_HQrBG4FtsE5SosK8I6BIQitZ0p5dixcipThKbaG7JaRoUGJPJiH9cHXSkyzsq5lB7wBAVKWM",
  "name" : "RICE",
  "types" : "[\"restaurant\",\"food\",\"establishment\"]",
  "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
  "formatted_address" : "1608 14th Street Northwest, Washington, DC, United States",
  "id" : "4aef4e92a6a73dc7a5fd5e7a5e345cec50338d11"
} ]
                angular.forEach(places, function(place){
                if( $.inArray(place.id, stops) != -1){
                stop_details.push(place);
                 }
               });
                console.log(stop_details);
        }   
    ])

我能够根据“stops”数组中的停靠站 ID 在“stop_details”数组中看到四个停靠站。现在我想根据“stop_details”数组中每个站点可用的纬度、经度坐标绘制谷歌地图中的站点。我应该如何更改代码才能实现此目的？

Answer 1

初始化 stop_details 数组后，此处紧接在 console.log(stop_details); 之后:

angular.forEach(stop_details, function(detail){
  var marker = new google.maps.Marker({
     position: new google.maps.LatLng(detail.lat, detail.lng),
     map: map,
  });
});

注意:完全未经测试，因为我现在的机器上没有 Angular ，但应该是这样。