个人中心
gpt4 book ai didi

javascript - 将 map 居中放置在 OpenStreetMap 中用户所在的位置

转载 作者：行者123 更新时间：2023-11-29 22:56:32 25 4
gpt4 key购买 nike

我是初学者网站管理员。我有带有 2 个标记和圆形的 map 。我有这段代码:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>title</title>
      <link rel="stylesheet" href="style.css">
      <script src="script.js"></script>
      <link href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" rel="stylesheet" type="text/css" />
      <script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script>
      <script src="Leaflet.Editable.js"></script>
      <style type="text/css">
         #mapdiv { height: 500px; }
      </style>
   </head>
   <body>
      <div id="mapdiv"></div>
      <script type="text/javascript">
         var map = L.map('mapdiv', {editable: true}).setView([54.35070881441067, 18.641191756395074], 13);
         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
             maxZoom: 30
         }).addTo(map);

         var LeafIcon = L.Icon.extend({
             options: {
                 shadowUrl: 'leaf-shadow.png',
                 iconSize:     [38, 95],
                 shadowSize:   [50, 64],
                 iconAnchor:   [22, 94],
                 shadowAnchor: [4, 62],
                 popupAnchor:  [-3, -76]
             }
         });

         var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
             redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
             orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});

         L.icon = function (options) {
             return new L.Icon(options);
         };

         L.marker([54.45070881441067, 18.541191756395074], {icon: greenIcon}).addTo(map).bindPopup('yyyyyy.<br> Easily customizable.');
         L.marker([54.35070881441367, 18.641191756395774], {icon: redIcon}).addTo(map).bindPopup('xxxxxxx.<br> Easily customizable.').openPopup();

         L.EditControl = L.Control.extend({
             options: {
                 position: 'topleft',
                 callback: null,
                 kind: '',
                 html: ''
             },

             onAdd: function (map) {
                 var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
                     link = L.DomUtil.create('a', '', container);

                 link.href = '#';
                 link.title = 'Create a new ' + this.options.kind;
                 link.innerHTML = this.options.html;
                 L.DomEvent.on(link, 'click', L.DomEvent.stop)
                           .on(link, 'click', function () {
                             window.LAYER = this.options.callback.call(map.editTools);
                           }, this);

                 return container;
             }
         });

         var circle = L.circle([54.35070881441067, 18.641191756395074], {radius: 1000}).addTo(map);
         circle.enableEdit();
         circle.on('dblclick', L.DomEvent.stop).on('dblclick', circle.toggleEdit);
         //circle.on('editable:vertex:drag', function (e) {
         map.on('editable:drawing:move', function (e) {
             console.log(circle.getLatLng())
             console.log(circle.getRadius());
         });
      </script>
   </body>
</html>

这段代码工作正常。

我需要添加到这张 map :- 将 map 以用户所在的位置(用户的位置)为中心，- 在用户所在的地方(用户的位置。

我怎样才能做到？有谁知道怎么做吗？

最佳答案

您可以将geolocation.setTracking 设置为true，它会自动获取用户当前位置并显示一个蓝点- Example Link

或者您可以使用 navigator javascript 对象获取用户当前的经纬度并将其传递给打开的街道 map 

navigator.geolocation.getCurrentPosition(showPosition);

示例 link获取用户的经纬度

在 map 初始化之后添加代码。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    /* map is object of Leaflet Map (var map = L.map(... )*/
    map.panTo(new L.LatLng(position.coords.latitude, position.coords.longitude));
  });
} else {
  alert("Geolocation is not supported by this browser.");
}

关于javascript - 将 map 居中放置在 OpenStreetMap 中用户所在的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56524191/

25 4 0
文章推荐： mysql根据select语句从同一个表中删除
文章推荐： php - 如何打印mysql报告并导出到excel
文章推荐： php - Paypal REST API 返回页面
文章推荐： php - 如何有效地同时哈希多个密码？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com