加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 使用angular-google-maps刷新地图和标记

发布时间:2020-12-17 06:47:37 所属栏目:安全 来源:网络整理
导读:嗨,我正在为我的项目使用angular-google-maps. html和js代码如下 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'"
嗨,我正在为我的项目使用angular-google-maps. html和js代码如下

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’)

.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,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-google-map的“控制”和“刷新”参数但无法使其工作.

解决方法

您需要使用uiGmapIsReady —而不是uiGmapGoogleMapApi —来等待控件对象使用他们的方法(例如刷新)进行扩充.

uiGmapIsReady服务提供了一个承诺,该承诺在所有uiGmapGoogleMap指令完全初始化后解析,而uiGmapGoogleMapApi服务仅在加载Google Maps JS API时解析.

有关使用uiGmapIsReady的示例,请参阅this answer.当然,别忘了the docs.

关于如何更新示波器上的models属性以更新地图,您的代码示例需要充实并清理以帮助您. (例如,getApartments更新$scope.apartments的解决方案是什么?或者可能问这个问题本身就是答案?)看看this fiddle,它可能会帮助你.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读