Overlayを使用してマップ上にアイコンを表示する方法です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenLayersテスト</title>
<script src="http://openlayers.org/en/v3.14.0/build/ol.js" type="text/javascript"></script>
<script type="text/javascript" src="js/map_marker.js"></script>
</head>
<body onload="init()">
<div id="map_canvas" style="width:100%; height:400px"></div>
</body>
</html>
前回同様上記のHTMLを記述します。
続けて下記のJavascriptを記述します。
function init(){
var mapObj = new ol.Map({
target: 'map_canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})
],
view: new ol.View({
center: convertCoordinate(139.76, 35.68),
zoom: 12
})
});
var mElement = document.createElement('img');
mElement.setAttribute('src','img/red-dot.png');
var markerOverlay = new ol.Overlay({
element: mElement,
position: convertCoordinate(139.76, 35.68),
positioning: 'bottom-center'
});
mapObj.addOverlay(markerOverlay);
}
function convertCoordinate(longitude, latitude) {
return ol.proj.transform([longitude, latitude], "EPSG:4326","EPSG:900913");
}
今回から外部ファイルへjavascriptを記述しています。
下記のように指定した場所へアイコンが表示されます。
スポンサード・リンク
