使用 angularjs 动态显示 google 地图精确点

Question

我试图在 google 地图上显示定位点，方法是匹配位置并检索用户使用 AngularJS、HTML 输入位置时保存在数据库中的经度、纬度列表和 Java。以下是我的控制器代码。请帮助我实现我的目标

app.controller('mapCtrl', function ( $scope, $http) {

          var mapOptions = {
              zoom: 4,
              center: new google.maps.LatLng(25,80),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }

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

          $scope.markers = [];
          $scope.cities = [];
          $scope.lati = [];
          $scope.longi = [];
          $scope.desc = [];

          var infoWindow = new google.maps.InfoWindow();





          $http.get('http://localhost:8080/acudraStore/getCity').
          success(function( data){

              for(i = 0;i <=3;i++){
                  $scope.cities.push(data.countryList[i].city);
                  $scope.lati.push(data.countryList[i].latitude);
                  $scope.longi.push(data.countryList[i].longitude);
                  $scope.desc.push(data.countryList[i].desc); 


          }


          var createMarker = function (){
              console.log($scope.cities[0]);
              var marker = new google.maps.Marker({
                  map: $scope.map,
                  position: new google.maps.LatLng($scope.lati[0],  $scope.longi[0]),
                  title:  $scope.cities[0]

              });
              marker.content = '<div class="infoWindowContent">' + $scope.desc[0] + '</div>';

              google.maps.event.addListener(marker, 'click', function(){
                  infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                  infoWindow.open($scope.map, marker);
              });
              $scope.markers = [];
              $scope.markers.push(marker);


          $scope.markers = [];
          for (i = 0; i < markers.length; i++){
              createMarker(markers[i]);
          }}
          });
          $scope.openInfoWindow = function(e, selectedMarker){
              e.preventDefault();
              google.maps.event.trigger(selectedMarker, 'click');
          }

      });

Answer 1

该示例（类似于所讨论的提供）演示了如何从外部资源加载位置并显示带有信息的标记 window:

var app = angular.module('mapApp', []);

app.controller('mapCtrl', function ($scope, $http) {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(-25.5349952, 125.8554386),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    $scope.markers = [];
    $scope.cities = [];
   
    var infoWindow = new google.maps.InfoWindow();

    $http.get('https://gist.githubusercontent.com/vgrem/dd818d266445f1a653c1/raw/e768daf280bab0791c2c27ae0f3d5952490bc2a5/cities.json').
        success(function (data) {

            $scope.cities = data.countryList;
            $scope.cities.forEach(function(city) {
                createMarker(city);
            });

        
        });

    var createMarker = function(city) {
        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(city.latitude, city.longitude),
            title: city.city

        });
        marker.content = '<div class="infoWindowContent">' + city.desc + '</div>';

        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });
        
        $scope.markers.push(marker);
    };

    //$scope.openInfoWindow = function (e, selectedMarker) {
    //    e.preventDefault();
    //    google.maps.event.trigger(selectedMarker, 'click');
    //}

});

#map {
    width: 800px;
    height: 600px;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true"></script> 

<div ng-app="mapApp" ng-controller="mapCtrl">
        <div id="map"></div>
</div>

Plunker

使用 angularjs 动态显示 google 地图精确点

Showing google map pinpoints dynamically using angularjs

angularjs

angular-google-maps