在 Meteor 的地图外为 Leaflet JS "panTo spot on map" 创建一个按钮

Question

我使用 Leaflet JS 在 Meteor 中创建了一张地图。问题是，我只能让 map.panTo 在 Template.dynamicmap.rendered 区域内工作。但是，这使得您在地图上的任何位置都可以平移到该位置。

这是移除了 ID 和访问令牌的完整渲染区域。

Template.dynamicmap.rendered = function() {
  var southWest = L.latLng(35.02035919622158, -121.21049926757814);
  var northEast = L.latLng(42.4426214924114, -110.79740478515624);
  var mybounds = L.latLngBounds(southWest, northEast);
  var map = L.map('map_container',{zoomControl: false, maxBounds: [[37.00035919622158, -119.23049926757814],[40.4626214924114, -112.77740478515624]],}).setView([38.685509760012, -115.86181640625001], 10);
  var w = window.innerWidth;
  var h = window.innerHeight;
  $('#map_container').css({width: w+'px', height: h+'px'});
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
bounds: mybounds,
maxZoom: 10,
minZoom: 9,
}).addTo(map);
  L.Icon.Default.imagePath = 'packages/leaflet/images';
  var marker = L.marker([38.685509760012, -115.86181640625001]).addTo(map);
  map.fitBounds(bounds);
};

所以我试着把它放在如下所示的模板事件中，这个按钮不在地图区域内但仍在动态地图模板中。虽然它不起作用。

Template.dynamicmap.events({    
 'click input.goto3':(function() {
  map.panTo(L.latLng(38.685509760012, -115.86181640625001)); 
 })
});

我收到错误：

"Uncaught ReferenceError: map is not defined"

在控制台中。我一直在努力解决这个问题，但没有运气。我希望这里有人能给我指出正确的方向。

这是我的 HTML 模板。

<template name="dynamicmap">
<div class="containerbox">
<div class="map_container" id="map_container">
</div>
</div>
<input type="button" class="goto3" value="Go"/>
</template>

Answer 1

您需要将 map 设为全局变量：

var map = null;
Template.dynamicmap.rendered = function() {
  var southWest = L.latLng(35.02035919622158, -121.21049926757814);
  var northEast = L.latLng(42.4426214924114, -110.79740478515624);
  var mybounds = L.latLngBounds(southWest, northEast);
  map = L.map('map_container',{zoomControl: false, ...
  ...

在 Meteor 的地图外为 Leaflet JS "panTo spot on map" 创建一个按钮

Creating a button for Leaflet JS "panTo spot on map" outside of the map in Meteor

leaflet

meteor