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)); 
 })
});

我收到错误：

＆＃34;未捕获的ReferenceError：未定义地图＆＃34;

在控制台中。我一直试图包围我的头但没有运气。我希望有人能指出我正确的方向。

这是我的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, ...
  ...

为Leaflet JS创建一个按钮＆＃34; panTo spot on map＆＃34;在流星的地图之外

1 个答案: