Добавление маркера с использованием OpenLayers 3

Question

Я хочу добавить простой маркер на любую долготу и широту (местоположение). Я много искал его, но не нашел разумного ответа или помощи оттуда. Некоторый код, который я пробовал, но они не работали нормально для меня. Я плохо разбираюсь в программировании и чтении существующего кода.

Пожалуйста, перейдите сюда http://openlayers.org/en/latest/examples/icon.html и посмотрите, что это хороший пример и показ значка, но за ним нет изображения. Я попытался показать любую карту и показать маркер с долготой и широтой, но он не работает с моего конца.

Я просто хочу показать простую карту с маркером в любом конкретном месте. По щелчку всплывающее окно должно открыться и содержать информацию об этом месте

E.g. Это ресторан хуга, хуг отель, хуг храм и т.д.

Answer 1

, если вы хотите, чтобы отобразить пользовательский контент в всплывающем окне при нажатии на маркерах:

$(element).popover({ 
     'placement': 'top', 
     'html': true, 
     'content': "this is a "+feature.get('type')+" in location : "+feature.getGeometry().getCoordinates().toString() 
     }); 

если пример в ссылке, которую вы поделились ISN Не работает для вас, вы можете показать ошибки, которые он возвращает в консоли

Answer 2

Фоновая карта в примере, который вы связали, была предназначена для того, чтобы выглядеть как изображение. Он протягивается со следующим кодом:

var rasterLayer = new ol.layer.Tile({ 
    source: new ol.source.TileJSON({ 
     url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json', 
     crossOrigin: '' 
    }) 
    }); 

Если вы хотите другую карту, вы можете заменить источник мозаичного слоя с любым из доступных источников в OpenLayers, или с вашей таможней один. Может быть, OpenStreetMap будет вариантом? Просто замените выше фрагмент следующим:

var rasterLayer = new ol.layer.Tile({ 
    source: new ol.source.OSM() 
    }); 

код, который позиционирует всплывающее окно и устанавливает его содержание в этом примере

 var coordinates = feature.getGeometry().getCoordinates(); 
     popup.setPosition(coordinates); 
     $(element).popover({ 
     'placement': 'top', 
     'html': true, 
     'content': feature.get('name') 
     }); 

также отображать широту и долготу, изменить этот код

 var coordinates = feature.getGeometry().getCoordinates(); 
     popup.setPosition(coordinates); 
     $(element).popover({ 
     'placement': 'top', 
     'html': true, 
     'content': feature.get('name') + ' ' + ol.coordinate.toStringHDMS(coordinates, 1) 
     });