清爽的地图和角谷歌,地图标记地图、清爽、标记、角谷歌

2023-09-13 03:55:00 作者:温存着那点回忆 . ぅ

您好我现在用的角谷歌,地图为我的项目。 HTML和JS code是如下:

Hi I am using the angular-google-maps for my project. The html and js code is as follows

HTML:结果     

html:

        <ui-gmap-markers models="apartments" coords="'loc'" icon="'assets/images/map_icon_normal.png'" idkey="'_id'"
                     fit="'false'" click="click">


      <ui-gmap-windows show="'show'" >
        <div ng-non-bindable>{{streetAddress}}</div>

      </ui-gmap-windows>
    </ui-gmap-markers>



  </ui-gmap-google-map>

脚本:angular.module('对myApp')

Script: angular.module('myApp')

.controller('MapCtrl',
                    function ($scope, $routeParams, Map, uiGmapGoogleMapApi) {
 $scope.apartments = [];
 $scope.customIcon = "../../assets/images/map_icon_normal.png"

$scope.map = {
      center: {
        latitude: $routeParams.lat,
        longitude: $routeParams.lon
      },

      zoom: 5,
      bounds: {},
      events: {
        tilesloaded: function (map) {
          //console.log('tiles loaded');
          $scope.$apply(function () {
            $scope.mapInstance = map;
            //console.log(map.getBounds().getNorthEast());
            $scope.searchbox.options.bounds = new google.maps.LatLngBounds($scope.mapInstance.getBounds().getNorthEast(),
              $scope.mapInstance.getBounds().getSouthWest());

          });
        },
        idle: function(map) {

          $scope.map.refresh = false;

        },
        resize: function(map) {
          console.log('resize');
        },
        dragend: function() {

        }
      },
      markersEvents: {
        click: function(marker, eventName, model, args) {
          console.log('markerEvent click');
          $scope.map.window.model = model;
          $scope.map.window.show = true;
        }
      },

      window :  {
        marker: {},
        show: false,
        closeClick: function() {
          this.show = false;
        },
        options: {} // define when map is ready
      },

      control: {},
      refresh: function () {
        $scope.map.control.refresh();
      }
    }

    uiGmapGoogleMapApi.then(function (map) {

      $scope.getData(20, 0, map);

      map.visualRefresh = true;
      $scope.mapInstance = map;


    })

       $scope.getData = function(limit, offset, map) {
      Map.getApartments($routeParams.lat, $routeParams.lon, limit, offset).success(function (data) {
         ///----- I get undefined error here---
              $scope.map.control.refresh();



      });

    }})
}

我不知道如何刷新地图与新的标志物,甚至触发更新地图。我打得四处控制和UI-GMAP,谷歌地图的刷新PARAMS,但不能让它开始工作。

I am not sure how to refresh the map with the new markers or even trigger an update to the map. I played around with 'control' and 'refresh' params of the ui-gmap-google-map but cannot get it to work.

推荐答案

您需要使用 uiGmapIsReady ---不是 uiGmapGoogleMapApi ---等待控制对象与他们的方法进行扩充(如刷新

You need to use uiGmapIsReady --- not uiGmapGoogleMapApi --- to wait for control objects to be augmented with their methods (such as refresh).

uiGmapIsReady 服务提供了解决当所有 uiGmapGoogleMap 指令已完全初始化一个承诺,而 uiGmapGoogleMapApi 解析服务时,只需在谷歌地图API的JS已加载。

The uiGmapIsReady service provides a promise which resolves when all uiGmapGoogleMap directives have been fully initialized, while the uiGmapGoogleMapApi service resolves simply when the Google Maps JS API has loaded.

请参阅这个答案使用 uiGmapIsReady 的一个例子。当然,不要忘了的文档。

See this answer for an example of using uiGmapIsReady. And of course, don't forget the docs.

关于如何获得更新到您的模型上的财产范围,以使更新您的地图,你的code例子就需要被充实和清理,以帮助你。 (例如,什么是 getApartments 操作来更新分辨率 $ scope.apartments ?或者,也许在问自己是自己的答案?)看看这拨弄,它可以帮助你在其间。

Regarding how to get updates to your models property on the scope to cause updates to your map, your code example needs to be fleshed out and cleaned up to help you there. (For example, what is the resolution of getApartments doing to update $scope.apartments? Or maybe asking that question is itself the answer?) Take a look at this fiddle, it might help you in the meantime.