Question

我想在Angular Google Maps中为标记点击事件维护一个单独的模板。在此模板上，我想在用户点击标记时显示标记信息。标记位于test.html

我的主要模板是

<ui-gmap-google-map center="map.center" pan="false" zoom="map.zoom" draggable="true" options="options">
    <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" events="markerEvents" icon="'icon'">
        <ui-gmap-windows show="'show'" options="windowOptions" closeClick="closeWindow" templateUrl="'test.html'" templateParameter="">
        </ui-gmap-windows>
    </ui-gmap-markers>
</ui-gmap-google-map>

控制器

uiGmapGoogleMapApi.then(function(maps){
        $scope.markers =[];

        $scope.map = {
           center: {
              latitude: 27.2101,
              longitude: 77.9728
           },
           zoom: 5,
           bounds : {},
           control : {}
        };
      });

      uiGmapIsReady.promise().then(function (instances) {
          var map = instances[0].map;
          var persons_location_dict={
            "session_key" : "sjaskajds343232",
            "id": 1
          };

          $http.post(some_user, persons_location_dict)
          .success(function (response,status) {
              var count =1;
              $scope.markers = response.result.employees_info;
              $scope.markers.forEach(function(maker){
                  maker.id = count++;
                  maker.coords = {};
                  maker.coords.latitude = maker.latitude;
                  maker.coords.longitude = maker.longitude;
                  maker.show = false;
              });

              $scope.employees_last_location = response.result.employees_info;
              console.log('Test');
          })
          .error(function(response, status){
              console.log('Error');
          });
          $scope.markerEvents = {
                mouseover: function (marker, eventName, model, args) {

                },
                mouseout: function (marker, eventName, model, args) {
                },
                drag: function (marker, eventName, model, args) {
                },
                dragend: function(marker) {

                },
                click: function (marker, eventName, model, args){
                  $scope.windowOptions.show = true;
                  $scope.windowOptions.visible = true;
                  $scope.first_name = marker.model.first_name;
                  $scope.$apply();
                }
          };// end of markerEvents
      });


      $scope.windowOptions = {
          show: false
      };

      $scope.closeClick = function () {
         $scope.windowOptions.show = false;
      };

Answer 1

您可以在 app 中创建一个文件夹，例如： json_data

然后创建一个json文件，例如： markers.json

[
{
    "city" : "Toronto",
    "desc" : "This is the best city in the world!",
    "lat" : 43.7000,
    "long" : -79.4000
},
{
    "city" : "New York",
    "desc" : "This city is aiiiiite!",
    "lat" : 40.6700,
    "long" : -73.9400
},
{
    "city" : "Chicago",
    "desc" : "This is the second best city in the world!",
    "lat" : 41.8819,
    "long" : -87.6278
},
{
    "city" : "Los Angeles",
    "desc" : "This city is live!",
    "lat" : 34.0500,
    "long" : -118.2500
},
{
    "city" : "Las Vegas",
    "desc" : "Sin City...nuff said!",
    "lat" : 36.0800,
    "long" : -115.1522
}
]

并在您的控制器中：

$http.get('json_data/markers.json').success(function(data) {
     $scope.markers = data;
}

AngularJS谷歌地图中标记的单独模板？

1 个答案: