Question

我正在尝试通过匹配当用户使用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

示例（类似于相关提供）演示了如何从外部资源加载位置并使用信息窗口显示标记：

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动态显示谷歌地图精确点

1 个答案: