本文主要是介绍Geolocation——地理位置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
This example uses the Geolocation API to control the view.
这个例子使用Geolocation的API来控制视图。
代码：
这个例子使用Geolocation的API来控制视图。
代码：
<!DOCTYPE html>
<html><head><title>Geolocation</title><link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css"><!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script><script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script></head><body><div id="map" class="map"></div><div id="info" style="display: none;"></div><label for="track">track position<input id="track" type="checkbox"/></label><p>position accuracy : <code id="accuracy"></code> altitude : <code id="altitude"></code> altitude accuracy : <code id="altitudeAccuracy"></code> heading : <code id="heading"></code> speed : <code id="speed"></code></p><script>var view = new ol.View({center: [0, 0],zoom: 2});var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',controls: ol.control.defaults({attributionOptions: /** @type {olx.control.AttributionOptions} */ ({collapsible: false})}),view: view});// 创建Geolocation对象var geolocation = new ol.Geolocation({projection: view.getProjection()});// 根据id获取元素function el(id) {return document.getElementById(id);}// 根据追踪的复选框来决定是否开启追踪el('track').addEventListener('change', function() {geolocation.setTracking(this.checked);});// update the HTML page when the position changes.// 当位置改变时更新HTML标签内容
geolocation.on('change', function() {el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';el('altitude').innerText = geolocation.getAltitude() + ' [m]';el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';el('heading').innerText = geolocation.getHeading() + ' [rad]';el('speed').innerText = geolocation.getSpeed() + ' [m/s]';});// handle geolocation error.// 处理位置错误
geolocation.on('error', function(error) {var info = document.getElementById('info');info.innerHTML = error.message;info.style.display = '';});// 创建精确位置要素var accuracyFeature = new ol.Feature();// 当精确位置改变时设置精确位置的几何要素为地理位置的精确位置
geolocation.on('change:accuracyGeometry', function() {accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());});// 位置要素var positionFeature = new ol.Feature();// 位置要素的样式
positionFeature.setStyle(new ol.style.Style({image: new ol.style.Circle({radius: 6,fill: new ol.style.Fill({color: '#3399CC'}),stroke: new ol.style.Stroke({color: '#fff',width: 2})})}));// 当地理位置改变时根据地理位置的坐标设置位置要素的几何对象geolocation.on('change:position', function() {var coordinates = geolocation.getPosition();positionFeature.setGeometry(coordinates ?new ol.geom.Point(coordinates) : null);});// 创建矢量图层new ol.layer.Vector({map: map,source: new ol.source.Vector({features: [accuracyFeature, positionFeature]})});</script></body>
</html>这篇关于Geolocation——地理位置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
