AngularJS Bản đồ Google với nhiều điểm đánh dấu

Question

Tôi hiện đang phát triển một dự án Ionic Framework (AngularJS) sử dụng Geo Location và Google Maps để hiển thị vị trí của người dùng.

Tôi đang cố gắng hiển thị cho người dùng Vị trí địa lý và nhiều điểm đánh dấu xung quanh khu vực.

Tôi đã có Vị trí địa lý hoạt động, nhưng dường như không thể thêm nhiều điểm đánh dấu.

Locations

var markers = [ 
    {'London Eye, London', 51.503454,-0.119562}, 
    {'Palace of Westminster, London', 51.499633,-0.124755} 
]; 

Controller.JS

// 1. Google Map // 
FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) { 
    $scope.initialise = function() { 
     var myLatlng = new google.maps.LatLng(37.3000, -120.4833); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     navigator.geolocation.getCurrentPosition(function(pos) { 
      map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
      var myLocation = new google.maps.Marker({ 
       position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
       map: map, 
       animation: google.maps.Animation.DROP, 
       title: "My Location" 
      }); 
     }); 
     $scope.map = map; 
    }; 
    google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise()); 
}); 

Answer 1

// 1. Google Map // 
var cities = [ 
    { 
     city : 'Location 1', 
     desc : 'Test', 
     lat : 52.238983, 
     long : -0.888509 
    }, 
    { 
     city : 'Location 2', 
     desc : 'Test', 
     lat : 52.238168, 
     long : -52.238168 
    }, 
    { 
     city : 'Location 3', 
     desc : 'Test', 
     lat : 52.242452, 
     long : -0.889882 
    }, 
    { 
     city : 'Location 4', 
     desc : 'Test', 
     lat : 52.247234, 
     long : -0.893567 
    }, 
    { 
     city : 'Location 5', 
     desc : 'Test', 
     lat : 52.241874, 
     long : -0.883568 
    } 
]; 

FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) { 
    // Map Settings // 
    $scope.initialise = function() { 
     var myLatlng = new google.maps.LatLng(37.3000, -120.4833); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
     // Geo Location/
     navigator.geolocation.getCurrentPosition(function(pos) { 
      map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
      var myLocation = new google.maps.Marker({ 
       position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
       map: map, 
       animation: google.maps.Animation.DROP, 
       title: "My Location" 
      }); 
     }); 
     $scope.map = map; 
     // Additional Markers // 
     $scope.markers = []; 
     var infoWindow = new google.maps.InfoWindow(); 
     var createMarker = function (info){ 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(info.lat, info.long), 
       map: $scope.map, 
       animation: google.maps.Animation.DROP, 
       title: info.city 
      }); 
      marker.content = '<div class="infoWindowContent">' + info.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); 
     } 
     for (i = 0; i < cities.length; i++){ 
      createMarker(cities[i]); 
     } 

    }; 
    google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise()); 

}); 

Answer 2

ở đây là hoàn toàn file js, bạn có thể chỉ cần sao chép dán này

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

myItemsApp.factory('itemsFactory', ['$http', function ($http) { 
var itemsFactory = { 
    itemDetails: function() { 
     return $http({ 
       url: "pos.json", 
       method: "GET" 

      }) 
      .then(function (response) { 
       return response.data; 
       console.log(response.data); 
      }); 
    } 
}; 
return itemsFactory; 

}]); 




myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function ($scope, itemsFactory) { 
var promise = itemsFactory.itemDetails(); 

promise.then(function (data) { 
    $scope.itemDetails = data; 
    console.log(data); 
}); 
$scope.select = function (item) { 
    $scope.selected = item; 
}; 
$scope.selected = {}; 

$scope.selected.latitude; 
}]); 


myItemsApp.directive("myMaps", function ($timeout) { 
return { 
    restrict: 'E', 
    template: '<div></div>', 
    replace: true, 
    link: function (scope, element, attrs) { 
     scope.$watchCollection('selected', function() { 
      var lat = scope.selected.latitude; 
      var lon = scope.selected.longitude; 

      var myLatLng = new google.maps.LatLng(lat, lon); 
      var mapOptions = { 
       center: myLatLng, 
       zoom: 12, 
       myTypeId: 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, 
       title: "my town" 
      }); 
      marker.setMap(map); 
     }); 

    } 
}; 
}); 

được thử nghiệm, tôi hy vọng nó sẽ làm việc cho bạn, cho tôi biết nếu bạn cần bất kỳ sự giúp đỡ bằng cách ở đây là file json cho sự hiểu biết tốt hơn

{ 
"snappedPoints": [ 
    { 
     "location": { 
      "latitude": -35.2784167, 
      "longitude": 149.1294692 
     }, 
     "originalIndex": 0, 
     "placeId": "ChIJoR7CemhNFmsRQB9QbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.280321693840129, 
      "longitude": 149.12908274880189 
     }, 
     "originalIndex": 1, 
     "placeId": "ChIJiy6YT2hNFmsRkHZAbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.2803415, 
      "longitude": 149.1290788 
     }, 
     "placeId": "ChIJiy6YT2hNFmsRkHZAbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.2803415, 
      "longitude": 149.1290788 
     }, 
     "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.280451499999991, 
      "longitude": 149.1290784 
     }, 
     "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.2805167, 
      "longitude": 149.1290879 
     }, 
     "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.2805901, 
      "longitude": 149.1291104 
     }, 
     "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.2805901, 
      "longitude": 149.1291104 
     }, 
     "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.280734599999995, 
      "longitude": 149.1291517 
     }, 
     "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.2807852, 
      "longitude": 149.1291716 
     }, 
     "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.2808499, 
      "longitude": 149.1292099 
     }, 
     "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.280923099999995, 
      "longitude": 149.129278 
     }, 
     "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM" 
}, 
    { 
     "location": { 
      "latitude": -35.280960897210818, 
      "longitude": 149.1293250692261 
     }, 
     "originalIndex": 2, 
     "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM" 
}, 

    { 
     "location": { 
      "latitude": -35.284728724835304, 
      "longitude": 149.12835061713685 
     }, 
     "originalIndex": 7, 
     "placeId": "ChIJW5JAZmpNFmsRegG0-Jc80sM" 
} 
]