Question

我有一个带地图的JS脚本，效果很好：

var lat = 0;
var lng = 0;

function onLocationFound(e) {
  var radius = e.accuracy / 2;
  lat = e.latlng.lat;
  lng = e.latlng.lng;
  console.log(e.latlng);

  L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!").openPopup();
  L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
  //alert(e.message);
}

var map = L.map('mapdiv', {
  editable: true,
  fadeAnimation: false
}).setView([54.35070881441067, 18.641191756395074], 15);

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 30,
  zoomControl: true,
  detectRetina: true
}).addTo(map);

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({
  setView: true,
  maxZoom: 16
});

let myFilter = ['grayscale:100%'];
let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
  attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
  filter: myFilter,
}).addTo(map);

/*
  lc = L.control.locate({
    strings: {
      title: "Show me where I am, yo!"
    }
  }).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.marker([54.58273849989086, 18.373226338357547], {
  icon: greenIcon
}).addTo(map).bindPopup('yyyyyy.<br> Easily customizable.');

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([lat, lng], {
  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());
});

在onLocationFound()函数中，我为lat和lng变量设置值。我想在这段代码中使用这些变量：

var circle = L.circle([lat, lng], {
  radius: 1000
}).addTo(map);

但是它不起作用。我在控制台中没有错误。我该如何解决？

Answer 1

问题是因为仅在地图上触发onLocationFound()事件时才调用locationfound函数，但是您尝试在此之前使用lat和lng值发生，因此值为undefined。

要解决此问题，请将var circle = ...函数移到onLocationFound()函数的内部行中。

function onLocationFound(e) {
  var radius = e.accuracy / 2;
  lat = e.latlng.lat;
  lng = e.latlng.lng;
  console.log(e.latlng);

  L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!").openPopup();
  L.circle(e.latlng, radius).addTo(map);

  var circle = L.circle([lat, lng], {
    radius: 1000
  }).addTo(map);
}

从此示例可以看到，您的代码在这一行中已经做了类似的事情：

L.circle(e.latlng, radius).addTo(map);

您要使用的代码中的区别只是您为圆定义的半径。

还请注意，然后您也可以删除这些变量的全局定义，因为应尽可能避免使用全局变量。

从JS中的函数发送变量

1 个答案: