2

我正在使用 Bing Maps AJAX 控件来显示地图。我已经为我想放在地图上的图钉创建了一个 Angular 指令：

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

在我的 Angular 控制器中，我设置了地图，然后将 (a) Pin(s) 添加到它，如下所示：

// 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 回答
0

我设法让它为一个信息框工作，我想它与图钉一样工作。请注意，这是一个粗略的工作副本，需要进一步的工作才能使它更好。它几乎完全以尽可能远离角度的方式完成。我想我会分享看到，因为没有人设法以一种对我有用的方式回答它。

我分两步完成：将 设置htmlContent为带有 ID 的空 div：

标记模板：

<div id="infoBox" style="display: none"><div id="infoboxText"></div></div>
<div id="infoBoxContents" style="display: none;"><b id="infoboxTitle" ng-bind="vm.searchResult"></b><p id="infoboxDescription">Select this address as the correct address? <button ng-click="vm.selectAddress()">Yes!</button></p></div>

控制器“搜索成功功能”

this.searchSuccess = function (geocodeResult, userData) {
    ...
    this.map.entities.clear(); //remove existing infoboxes from the map
    var template = $('#infoBox').html(); //<div id="infoboxText"></div>
    var pin = new Microsoft.Maps.Pushpin(location, { draggable: false });
    var infoboxOptions = {
        pushpin: pin
    };
    var defaultInfobox = new Microsoft.Maps.Infobox(_this.map.getCenter(), infoboxOptions);
    defaultInfobox.setHtmlContent(template);
    this.map.entities.push(defaultInfobox); //add it to the map
    this.addContentToInfobox();
}

this.addContentToInfobox = function() {
    var rawContentHtml = $('#infoBoxContents').html();
    $("#infoboxText").html(_this.$compile(rawContentHtml)(_this.$scope));
    this.$scope.$apply();
}

小提琴：（需要 API 密钥）：http: //jsfiddle.net/KyleMuir/m9ato59v/

于 2014-10-13T01:48:43.647 回答