2

Bing Maps AJAX Control を使用してマップを表示しています。そして、マップに配置したい画鋲用の Angular ディレクティブを作成しました。

app.directive('myPin', function(){
    return {
        restrict: 'E',
        templateUrl: '<p>{{title}}</p>'
    }
})

Angular コントローラー内でマップをセットアップし、次のようにピンを追加します。

// Define the title for the Pin
$scope.title = 'Test title';

// Define the location and the options for the Pin
var location = new Microsoft.Maps.Location(52.48, 13.42);
var pushpinOptions = {
    width: null,
    height: null,
    htmlContent: '<my-pin></my-pin>'
};

// Push the Pin onto the map
map.entities.push(new Microsoft.Maps.Pushpin(location, pushpinOptions));

残念ながら、明らかに同様に、"htmlContent" の一部が Bing サービスによって DOM に動的に挿入されるため、カスタム ピンがマップに表示されません。私は Angular の $compile サービスをいろいろ試しましたが、それを機能させる方法がわかりませんでした...

4

2 に答える 2

0

私はついにこれを機能させることができました。

var devicePanel = '<div ng-include src=" \'/templates/Device/Map/_devicePanel.html\' "></div>'
var template = this.$compile(devicePanel)(this.$scope);

var pushPinItem;
for (var x = 0; x < this.map.entities.getLength(); x++) {
    pushPinItem = this.entities.get(x);
    if (pushPinItem instanceof Microsoft.Maps.Pushpin) {
        pushPinItem.setOptions({ htmlContent: template[0].outerHTML });
    }
}

これは初期レイアウトで機能します。テンプレートが確実に更新されるように、変更を $apply する必要がある場合があります。

于 2014-09-11T12:02:37.010 に答える