Question

我正在将ember-leaflet用于一个新项目，并且有一个组件，其中包含一个带有多个标记的地图，称为embedded-map。我正在其页面上关注该教程，可以为我的地图设置一个静态zoom值。

我看到传单javascript库提供了某种fitBounds函数。使用ember-leaflet时是否可以访问它？我的文档搜索很短，但是我确实找到了一个看起来相关的模板帮助程序，但与我要找的不完全相同：https://miguelcobain.github.io/ember-leaflet/docs/helpers/lat-lng-bounds。

embedded-map.js

import Component from "@ember/component";
import { computed } from "@ember/object";
import { readOnly } from "@ember/object/computed";

export default Component.extend({
  tagName: "",
  zoom: 10.25, /* I'd like this to initialize to fit all map markers */

  lat: readOnly("trip.averageLatitude"), /* `trip` is a model passed into the component */
  lng: readOnly("trip.averageLongitude"),

  location: computed("trip.averageLatitude", "trip.averageLongitude", function() {
    return [this.get("averageLatitude"), this.get("averageLongitude")];
  }),
});

embedded-map.hbs

{{#leaflet-map lat=lat lng=lng zoom=zoom as |layers|}}
  {{layers.tile url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"}}

  {{#each trip.days as |day|}}
    {{#each day.dayItems as |item|}}
      {{#layers.marker location=item.coordinates as |marker|}}
        {{#marker.popup}}
          <h3>{{item.name}}</h3>
        {{/marker.popup}}
      {{/layers.marker}}
    {{/each}}
  {{/each}}
{{/leaflet-map}}

Answer 1

我对最新的API并不十分熟悉，但是当我在2017年末/ 2018年初的项目中使用ember-leaflet时，我为该用例确定了至少两个选择。选择哪种取决于您的用例和您认为“适当”的东西。

您可以利用onLoad组件的ember-map操作

{{#leaflet-map onLoad=(action "showAllPins") }}

并在操作中处理边界设置逻辑

showAllPins(map){
  let mapTarget = map.target;
  let disableDrag = this.disableDrag;
  // you *can* do totally store the map for later use if you want but... the
  // addon author is trying to help you avoid accessing leaflet functions directly
  this.set('map', mapTarget);

  /* determine min/max lat and lng */

  //set the bounds
  mapTarget.fitBounds([[lowestLatitude, lowestLongitude], [highestLatitude, highestLongitude]]);
}

或者您可以通过扩展LeafletMap来使用继承，并拥有自己的单张地图自定义版本，以特定于域的方式处理缩放设置（扩展此类可让您覆盖/增强具有访问权限的现有方法到基础的传单对象）。

Answer 2

由于找到了@mistahenry上面的解决方案时，我在控制台中看到一条错误消息，因此我找到了解决该问题的方法。

本教程建议您将lat，lng和zoom参数传递到leaflet-map声明中，但是错误消息指出您也可以传递{{1} }而不是上面的3，并且您不知道吗-正是我想做的！

我使用手边的所有地图标记计算最大和最小纬度和经度，并将其传递到bounds组件中，以适合屏幕上所有标记的方式呈现地图。

ember-leaflet-通过缩放初始化地图以适合所有图钉

2 个答案: