Пример добавления нескольких пользовательских маркеров в Bing Maps (API) - PullRequest
Новая
       45

Пример добавления нескольких пользовательских маркеров в Bing Maps (API)

0 голосов
/ 19 октября 2018

Я начал с этого примера: https://code.msdn.microsoft.com/bing/Using-the-Bing-Maps-V8-Web-07e21f3a#content

, который в основном дает форму с опцией поиска и представляет результат поиска в HTML-файле.

Теперь я пытаюсьдобавить массив элементов вместо одного в HTML-файл, чтобы показать их.Но я не могу понять, как получить HTML-файл для захвата списка адресов из файла Form1.cs с помощью нажатия кнопки

Я добавил это в форму: 

    private void GroupBtn_Click(object sender, EventArgs e)
    {
        var pushpinInfos = new[] {
            new { lat = 41.80584, lng = 21.15498, title = "Salmon Market", description = "<a href=\"http://www.google.com\">Kipper</a> Gostivar", icon = "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Inside-Chartreuse-icon.png" },
            new { lat = 42.000900, lng = 21.466440, title = "Market", description = "Gostivar", icon = "https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg" }
        };

        MyWebBrowser.Document.InvokeScript("SetMap", new object[] { pushpinInfos });
    }

И это в html-файле: 

    function SetMap(addresses) {
    //Create an infobox at the center of the map but don't show it.
    infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
        visible: false
    });

    //Assign the infobox to a map instance.
    infobox.setMap(map);

    pinLayer = new Microsoft.Maps.EntityCollection();
    map.entities.push(pinLayer);

    var pins1 = JSON.stringify(addresses);

    // alert(pins1);

    $.each(JSON.parse(pins1), function (key, pinJson) {


        var position = new Microsoft.Maps.Location(pinJson.lat, pinJson.lng);
        // Creates a Pushpin
        var pin = new Microsoft.Maps.Pushpin(position, { text: pinJson.Title, icon: 'images/map_pin_13.png', typeName: 'sampleCustom' });
        //Store some metadata with the pushpin.
        pin.metadata = {
            title: 'Pin',
            description: 'Discription for pin'
        };
        //Add a click event handler to the pushpin.
        Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
        //Add pushpin to the map.
        map.entities.push(pin);
        pinLayer.push(pin);
    });
}

Но это не работает, и я не могу отладить html-форму.

Итак, мои вопросы:

1) Нет ли способа отладить html-часть?

2) Где я ошибся, пытаясь показать 2 адреса на карте?

1 Ответ

0 голосов
/ 20 октября 2018

Пара проблем в вашем коде:

  • Вы создаете слой булавок, но добавляете булавки непосредственно на карту и в слой.Это вызовет проблему.
  • Ваш слой выводов использует устаревший класс EntityCollection и map.entities.Используйте map.layers и Microsoft.Maps.Layer
  • У канцелярских кнопок нет опции typeName.Это была функция в старом элементе управления картой, которая недоступна в последней версии, поскольку рендеринг происходит на холсте HMTL5, который не поддерживает стили CSS.
  • Незначительная вещь, но при использовании слоя добавляйте в него событияа не отдельные фигуры, это помогает с производительностью.

Вот модифицированная версия вашего кода: 

function SetMap(addresses) {
    //Create an infobox at the center of the map but don't show it.
    infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
        visible: false
    });

    //Assign the infobox to a map instance.
    infobox.setMap(map);

    pinLayer = new Microsoft.Maps.Layer();
    map.layers.insert(pinLayer);

    //Add a click event handler to the pin layer.
    Microsoft.Maps.Events.addHandler(pinLayer, 'click', pushpinClicked);

    var pins1 = JSON.stringify(addresses);

    // alert(pins1);

    $.each(JSON.parse(pins1), function (key, pinJson) {


        var position = new Microsoft.Maps.Location(pinJson.lat, pinJson.lng);
        // Creates a Pushpin
        var pin = new Microsoft.Maps.Pushpin(position, { text: pinJson.Title, icon: 'images/map_pin_13.png', typeName: 'sampleCustom' });
        //Store some metadata with the pushpin.
        pin.metadata = {
            title: 'Pin',
            description: 'Discription for pin'
        };

        //Add pushpin to the map.
        pinLayer.add(pin);
    });
}
...