Leaflet笔记(13)移动端使用Leaflet定位用户位置

本文目录
  • 正文

本文介绍使用 Leaflet 获取用户位置的方法。

在 HTML5 的规范中已经增加了获取用户位置的接口,可以看这里:关于HTML5中的定位函数。但在 Leaflet 下,做了更进一步的封装,直接使用一个 locate 函数即可完成。

调用 locate 函数定位到用户位置

先显示底图,然后定位到用户位置。

var m = L.map('map-container').fitWorld();
var tileAddress = 'https://api.mapbox.com/styles/v1/yqcim/';
tileAddress += 'cizh1ma3400ez2so5x1anhuzo/tiles/256/{z}/{x}/{y}';
tileAddress += '?access_token=pk.eyJ1IjoieXFjaW0iLCJhIjoiY2l6ZmhnZjEx';
tileAddress += 'MDBhajJ4cGxnNGN5MnhpdCJ9.pcZtdfk8mSFboCdwqkvW6g';

var attribution = 'Map data &copy; <a href="http://openstreetmap.org">';
attribution += 'OpenStreetMap</a> contributors, '
attribution += '<a href="http://creativecommons.org/licenses/by-sa/2.0/">';
attribution += 'CC-BY-SA</a>, ';
attribution += 'Imagery © <a href="http://mapbox.com">Mapbox</a>';

L.tileLayer(tileAddress, {
  maxZoom: 18,
  attribution: attribution,
  id: 'mapbox.streets'
}).addTo(m);

// Geolocation
m.locate({
  setView: true,
  maxZoom: 16
});

添加定位事件处理函数

上面的代码只定位了用户位置,但并没有标记出来,在 Leaflet 封装了 locationfoundlocationerror 函数,用于响应定位完成/失败的后续处理事件。比如可以这样写:

m.on('locationfound', function(e) {
  var radius = e.accuracy / 2;
  L.marker(e.latlng).addTo(m).bindPopup("你就在这个圈内");
  L.circle(e.latlng, radius).addTo(m);
});

m.on('locationerror', function(e) {
  console.log('定位出错=====>', e);
});

定位完成之后画了个圈,失败就把信息log出来。

效果

定位效果如下:

演示示例

注意,新版浏览器中定位需要server支持 https,否则没有权限调用用户位置。

移动端-一个全屏的Leaflet定位演示地图

所有代码

leafletjs/note-10.html at master · sailor103/leafletjs

没有下文
如果本文对你有所帮助,欢迎对我们团队进行打赏捐助,让我们在传播3S的路上可以走得更远。
赞赏支持
微信捐助麻辣GIS 支付宝捐助麻辣GIS

麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。

如您有疑问,可在文末留言,或到QQ群提问。

本站QQ群(一):291616564 麻辣GIS

本站QQ群(二):166408035 麻辣GIS(二)

微信公众号:malagis,扫描右边二维码直接关注。

发表评论