时间戳

首页 > 解决方案 > ember-leaflet - 使用缩放初始化地图以适合所有引脚

ember.js - ember-leaflet - 使用缩放初始化地图以适合所有引脚

问题描述

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

我看到传单 javascript 库有某种fitBounds可用的功能。有没有办法在使用时访问它ember-leaflet？我的文档搜索很短，但我确实找到了一个看起来相关的模板助手，但不是我正在寻找的：https ://miguelcobain.github.io/ember-leaflet/docs/helpers/lat-lng-界限。

嵌入-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")];
  }),
});

嵌入式地图.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}}

标签： ember.jsleaflet

解决方案

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

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

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

推荐阅读