ember-leaflet - инициализировать карту с увеличением, чтобы уместить все контакты - PullRequest
Новая
       13

ember-leaflet - инициализировать карту с увеличением, чтобы уместить все контакты

1 голос
/ 04 июня 2019

Я использую ember-leaflet с новым проектом, и у меня есть компонент, в котором размещена карта с несколькими маркерами, который называется embedded-map. Я следую инструкциям на их странице и могу установить статическое значение zoom для моей карты.

Я видел, что есть какая-то функция fitBounds, доступная для библиотеки javascript листовки. Есть ли способ получить к нему доступ при использовании ember-leaflet? Мой поиск по документации был коротким, но я нашел помощника по шаблону, который кажется связанным, но не совсем то, что я ищу: https://miguelcobain.github.io/ember-leaflet/docs/helpers/lat-lng-bounds.

внедренные-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")];
  }),
});

внедренные-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}}

Ответы [ 2 ]

1 голос
/ 05 июня 2019

Я нашел решение проблемы благодаря сообщению об ошибке, которое я увидел в консоли при поиске решения @ mishenry выше.

В руководстве предлагается передать параметры lat, lng и zoom в объявление leaflet-map, но в сообщении об ошибке говорится, что вы также можете передать bounds вместо вышеуказанных 3, и не будет ты знаешь это - он делает именно то, что я пытаюсь сделать!

Я рассчитываю максимальную и минимальную широту и долготу, используя все имеющиеся у меня маркеры карты, и передаю это в компонент embedded-map, чтобы отобразить карту так, чтобы она соответствовала всем маркерам на экране.

1 голос
/ 04 июня 2019

Я не очень хорошо знаком с последним API, но когда я использовал ember-leaflet в проекте в конце 2017 / начале 2018 года, я определил по крайней мере два варианта для этого варианта использования.То, что вы выберете, зависит от вашего варианта использования и того, что вы считаете «правильным».

Вы можете использовать действие 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 и иметь собственную пользовательскую версию карты листовок, которая обрабатывает настройку масштабирования для конкретного домена (расширение этого класса позволяет переопределять / расширять существующие методы, которые имеют доступ к базовому объекту листовки).

...