AngularJS:使用Google Maps API渲染多个标记的问题

时间:2018-09-17 16:26:39

标签: angularjs google-maps google-maps-markers

我正在尝试在Google地图上放置多个标记以显示当前位置和接收位置,但是如果这些位置是动态的而不是硬编码的,则似乎无法显示地图。在下面的代码中,我删除了Current Station的硬编码位置,并尝试动态生成经纬度,但是在控制台中出现语法错误。

我以前从未使用过Google Maps API,并且是AngularJS的初学者,所以我不太清楚自己在做什么错。任何建议,我们将不胜感激!

<div class="banner">
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&callback=initMap">
  </script>
</div>



 <script>
          function initMap() {
            var center = {lat: 34.052235, lng: -118.243683};
            var locations = [
              ['Current Station', {{c.profile[0].current_latitude}}, {{c.profile[0].current_longitude}}, 1],
              ['Receiving Station', -33.923036, 151.259052, 2],
            ];
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 9,
              center: center
            });
            var infowindow =  new google.maps.InfoWindow({});
            var marker, count;
            for (count = 0; count < locations.length; count++) {
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map,
                title: locations[count][0]
              });
              google.maps.event.addListener(marker, 'click', (function (marker, count) {
                return function () {
                  infowindow.setContent(locations[count][0]);
                  infowindow.open(map, marker);
                }
              })(marker, count));
            }
          }
        </script>

data.profile.push({
            name: hr.getDisplayValue('affected_employee'),
            first_name: hr.getDisplayValue('affected_employee').split(' ')[0],
            time_zone: tz,
            pcsCase: hr.getDisplayValue('number'),
            pcs_category: hr.getDisplayValue('pcs_category'),
            current_station_loc: current.getDisplayValue('name'),
            current_latitude: current.getDisplayValue('latitude'),
            current_longitude: current.getDisplayValue('longitude'),
            receiving_station_loc: currentRec.getDisplayValue('name'),
            receiving_latitude: currentRec.getDisplayValue('latitude'),
            receiving_longitude: currentRec.getDisplayValue('longitude'),
            current_station_state: current_loc,
            receiving_station_state: receiving_loc,
            effective_date: hr.getDisplayValue('proposed_effective_date'),
            state: hr.getDisplayValue('state')
        });

0 个答案:

没有答案