Пользовательский Pushpin с содержимым угловой директивы на Bing Maps

Я использую элемент управления BJ Maps AJAX для отображения карты. И я создал угловую директиву для Pushpins, которую я хотел бы поместить на карту:

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

в своем контроллере Angular я настраиваю карту и затем добавляю (а) 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" динамически вводится в DOM службой Bing. Я много пробовал с $compile сервисом Angular, но я не мог понять, как заставить его работать...

Источник

2 ответа

Решение

Мне удалось заставить это работать для инфобокса, я думаю, что он будет работать так же с канцелярской кнопкой. Обратите внимание, что это грубая рабочая копия, и для ее улучшения потребуется дополнительная работа. Это почти полностью сделано как можно дальше от углового пути. Я думал, что поделюсь наблюдением, так как никто не смог ответить на него так, как мне это помогло.

Я сделал это в два этапа: установить htmlContent на пустой 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();
}

FIDDLE: (требуется ключ API): http://jsfiddle.net/KyleMuir/m9ato59v/

Источник

Мне наконец удалось заставить это работать.

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 });
    }
}

Это работает для первоначального макета. Вам может понадобиться применить все изменения, чтобы убедиться, что шаблон обновлен.

Источник
Другие вопросы по тегам