說明：OpenLayers 3詳細官方API文檔：http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm
1.該例子為頁面在固定經緯度的情況下對地圖進行單個或者多個標點，并沒有從后臺數據庫獲取經緯度數據，之后會再更新通過json來實現與與數據庫實時進行標點。
2.首先我們還是先做好離線地圖，具體操作參照我的另外一篇博文：使用OpenLayers發布離線地圖
3.離線地圖實現了之后，新建一個image文件夾，把我們標注所需要用到的圖片放入其中，如下圖所示：
4.整個地圖文件夾格式變為：
5.index.html源碼如下所示：
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>根據經緯度實現單個描點
</title
><link href
="./ol.css" rel
="stylesheet" type
="text/css" /><script src
="./ol.js" type
="text/javascript"></script
><style type
="text/css">body
, html
{border
: none
;padding
: 0;margin
: 0;}#menu
{width
: 100%;height
: 20px
;padding
: 5px
10px
;font
-size
: 14px
;font
-family
: "微軟雅黑";left
: 10px
;text
-align
: center
;}#mapCon
{width
: 100%;height
: 600px
;position
: relative
;}.ol
-popup
{position
: absolute
;background
-color
: white
;-webkit
-filter
: drop
-shadow(0 1px
4px
rgba(0,0,0,0.2));filter
: drop
-shadow(0 1px
4px
rgba(0,0,0,0.2));padding
: 15px
;border
-radius
: 10px
;border
: 1px solid #cccccc
;bottom
: 45px
;left
: -50px
;}.ol
-popup
:after
, .ol
-popup
:before
{top
: 100%;border
: solid transparent
;content
: " ";height
: 0;width
: 0;position
: absolute
;pointer
-events
: none
;}.ol
-popup
:after
{border
-top
-color
: white
;border
-width
: 10px
;left
: 48px
;margin
-left
: -10px
;}.ol
-popup
:before
{border
-top
-color
: #cccccc
;border
-width
: 11px
;left
: 48px
;margin
-left
: -11px
;}.ol
-popup
-closer
{text
-decoration
: none
;position
: absolute
;top
: 2px
;right
: 8px
;}.ol
-popup
-closer
:after
{content
: "?";}#popup
-content
{font
-size
: 14px
;font
-family
: "微軟雅黑";}#popup
-content
.markerInfo
{font
-weight
: bold
;}</style
>
</head
>
<body
>
<div id
="menu" style
="font-weight:bold"></div
>
<div id
="mapCon"><!-- Popup
--><div id
="popup" class="ol-popup"><a href
="#" id
="popup-closer" class="ol-popup-closer"></a
><div id
="popup-content"></div
></div
>
</div
>
<script type
="text/javascript">var beijing
= ol
.proj
.fromLonLat([113.34, 23.07]);var featuerInfo
= {geo
: beijing
,att
: {title
: "廣州市",titleURL
: "http://www.openlayers.org/",text
: "廣州（簡稱穗），別稱羊城、花城，廣東省省會，是國際大都市、國際商貿中心、國際綜合交通樞紐，首批沿海開放城市，也是南部戰區司令部駐地，是粵港澳大灣區、泛珠江三角洲經濟區的核心城市以及一帶一路的樞紐城市。",imgURL
: "./image/bj.jpg"}}var center
=ol
.proj
.transform([113.271429,23.135336],'EPSG:4326','EPSG:3857');var map
=new ol.Map({view
:new ol.View({center
:center
,minZoom
:7,maxZoom
:13,zoom
:7}),target
:'mapCon'});var offLineMap
=new ol.layer.Tile({source
:new ol.source.XYZ({url
:'tile/{z}/{x}/{y}.png'})});map
.addLayer(offLineMap
);var createLabelStyle = function (feature
) {return new ol.style.Style({image
: new ol.style.Icon({anchor
: [0.5, 60],anchorOrigin
: 'top-right',anchorXUnits
: 'fraction',anchorYUnits
: 'pixels',offsetOrigin
: 'top-right',opacity
: 0.75,src
: './image/blueIcon.png'}),text
: new ol.style.Text({textAlign
: 'center',textBaseline
: 'middle',font
: 'normal 14px 微軟雅黑',text
: feature
.get('name'),fill
: new ol.style.Fill({ color
: '#aa3300' }),stroke
: new ol.style.Stroke({ color
: '#ffcc33', width
: 2 })})});}var iconFeature
= new ol.Feature({geometry
: new ol.geom.Point(beijing
),name
: '廣州市',population
: 2115});iconFeature
.setStyle(createLabelStyle(iconFeature
));var vectorSource
= new ol.source.Vector({features
: [iconFeature
]});var vectorLayer
= new ol.layer.Vector({source
: vectorSource
});map
.addLayer(vectorLayer
);var container
= document
.getElementById('popup');var content
= document
.getElementById('popup-content');var closer
= document
.getElementById('popup-closer');var popup
= new ol.Overlay({element
: container
,autoPan
: true,positioning
: 'bottom-center',stopEvent
: false,autoPanAnimation
: {duration
: 250}});map
.addOverlay(popup
);closer
.onclick = function () {popup
.setPosition(undefined
);closer
.blur();return false;};function addFeatrueInfo(info
) {var elementA
= document
.createElement('a');elementA
.className
= "markerInfo";elementA
.href
= info
.att
.titleURL
;setInnerText(elementA
, info
.att
.title
);content
.appendChild(elementA
);var elementDiv
= document
.createElement('div');elementDiv
.className
= "markerText";setInnerText(elementDiv
, info
.att
.text
);content
.appendChild(elementDiv
);var elementImg
= document
.createElement('img');elementImg
.className
= "markerImg";elementImg
.src
= info
.att
.imgURL
;content
.appendChild(elementImg
);}function setInnerText(element
, text
) {if (typeof element
.textContent
== "string") {element
.textContent
= text
;} else {element
.innerText
= text
;}}map
.on('click', function (evt
) {var feature
= map
.forEachFeatureAtPixel(evt
.pixel
, function (feature
, layer
) { return feature
; });if (feature
) {content
.innerHTML
= '';addFeatrueInfo(featuerInfo
);if (popup
.getPosition() == undefined
) {popup
.setPosition(beijing
);}}});map
.on('pointermove', function (e
) {var pixel
= map
.getEventPixel(e
.originalEvent
);var hit
= map
.hasFeatureAtPixel(pixel
);map
.getTargetElement().style
.cursor
= hit
? 'pointer' : '';});
</script
>
</body
>
</html
>
6.實現效果如下圖所示：
7.點擊該地圖標記后效果如下圖所示：
總結
以上是生活随笔為你收集整理的使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
