angular谷歌地图:如何在ui gmap标记中获取当前模型

angular-google-maps: how to get current model in ui-gmap-markers

本文关键字：获取 模型 gmap 谷歌地图 ui angular      更新时间：2023-09-26

我正在尝试为每个标记加载图标。每个标记的图标都不同。

我有一个函数"getIcon"，它需要来自每个绑定模型（item.uid）的uid

如果我将"this"传递给getIcon，它是未定义的。

似乎没有办法找到当前的型号。

我将不得不在这里使用"ui-gmap标记"而不是"ui-gmap-marker"

这个选项真的很奇怪。

<ui-gmap-markers models="items" idkey="'Uid'"                     
                 options="{icon: getIcon(this, map.zoom)}"
                 coords="'self'" icon="'icon'">
</ui-gmap-markers>

在本例中，this指的是ui-gmap-markers指令隔离的作用域，模型属性不可访问，因为它属于子作用域。

您可以考虑以下方法来绑定基于地图缩放的图标标记。

首先，让我们介绍每个缩放级别的图标阵列：

$scope.zoomIcons = {};
var althabet = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split("");
var l = 0;
althabet.forEach(function(ch){
    $scope.zoomIcons[l] = 'http://www.google.com/mapfiles/marker' + ch + '.png';
    l++;
});

然后让我们使用icon指令属性指定标记图标：

<ui-gmap-markers models="items" idkey="'Uid'" coords="'self'" icon="'icon'">                 
</ui-gmap-markers>

其中icon属性和其他属性将针对每个标记进行初始化（有关更多详细信息，请参见下面的示例）

最后一步是在地图缩放更改后更新标记图标，如下所示：

$scope.$watch(function () { return $scope.map.zoom; }, function (newZoom, oldZoom) {
    if(newZoom != oldZoom){
        console.log('Zoom:' + newZoom + ':'  + oldZoom);  
        $scope.items.forEach(function(item){
          item.icon = $scope.getIcon(newZoom);    
        }); 
    }
}, true);

工作示例

var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function($scope) {
    $scope.map = {
        center: { latitude: 40.1451, longitude: -99.6680 },
        zoom: 4,
        options: { scrollwheel: false }
    };
    $scope.zoomIcons = {};
    var althabet = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split("");
    var l = 0;
    althabet.forEach(function(ch){
        $scope.zoomIcons[l] = 'http://www.google.com/mapfiles/marker' + ch + '.png';
        l++;
    });
    var getRandomLat = function() {
        return Math.random() * (180.0) - 90.0;
    };
    var getRandomLng = function () {
        return Math.random() * (360.0) - 180.0;
    };  
    var createRandomMarker = function(i) {
        var item = {
            latitude: getRandomLat(),
            longitude: getRandomLng(),
            title: '#' + i,
            show: true,
            Uid: i,
            icon: $scope.getIcon($scope.map.zoom)
        };
        return item;
    };
    $scope.getIcon = function(zoom) {
        return { url: $scope.zoomIcons[zoom] };
    };
    
    $scope.items = [];
    for (var i = 0; i < 160; i++) {
        $scope.items.push(createRandomMarker(i));
    }
  
    
    $scope.$watch(function () { return $scope.map.zoom; }, function (newZoom, oldZoom) {
        if(newZoom != oldZoom){
            console.log('Zoom:' + newZoom + ':'  + oldZoom);  
            $scope.items.forEach(function(item){
              item.icon = $scope.getIcon(newZoom);    
            }); 
        }
    }, true);
});
html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
}
#map_canvas {
    position: relative;
}
.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl"> 
        <ui-gmap-google-map center="map.center" zoom="map.zoom"  options="map.options" events="map.events">
            <ui-gmap-markers models="items" idkey="'Uid'" 
                             coords="'self'" icon="'icon'" >                 
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>

相关文章：