单张自定义坐标图像

演示:http://plnkr.co/edit/5SQqp7SP4nf8muPM5iso?p=preview(我用Plunker代替的jsfiddle因为你提供HTML一整页的代码,而的jsfiddle希望你到你的HTML,CSS和JavaScript代码分割成独立的模块).

至于显示坐标和"定位"按钮,它实现起来非常容易,因此它类似于你提到的例子.如果您需要帮助,请随时打开新问题.

在上面的演示中,我使用Leaflet.Coordinates插件快速实现两个功能(请参阅地图左下角的控件;您必须开始在地图上移动鼠标以显示坐标;单击该控件以打开版本模式).

编辑:

对于Leaflet.Coordinates插件,它包装显示的坐标经度保持在[-180; 180]度.

在您的坐标不是度数的情况下,没有包装经度的点.

我认为这是点击弹出窗口和控件之间坐标差异的原因.

只需修补插件代码以防止包装:

// Patch first to avoid longitude wrapping.
L.Control.Coordinates.include({
  _update: function(evt) {
    var pos = evt.latlng,
      opts = this.options;
    if (pos) {
      //pos = pos.wrap(); // Remove that instruction.
      this._currentPos = pos;
      this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator);
      this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator);
      this._label.innerHTML = this._createCoordinateLabel(pos);
    }
  }
});

L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
  transformation: new L.Transformation(1 / 32, 134, -1 / 32, 134)
});

var map = L.map('map', {
  maxZoom: mapMaxZoom,
  minZoom: mapMinZoom,
  crs: L.CRS.MySimple
}).setView([0, 0], mapMaxZoom);

// Patch first to avoid longitude wrapping.
L.Control.Coordinates.include({
  _update: function(evt) {
    var pos = evt.latlng,
      opts = this.options;
    if (pos) {
      //pos = pos.wrap(); // Remove that instruction.
      this._currentPos = pos;
      this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator);
      this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator);
      this._label.innerHTML = this._createCoordinateLabel(pos);
    }
  }
});