Angular-google-maps: Автоматически подогнать границы карты к создателям / элементам?

Да, я также считаю, что это обязательная функция. Но я борюсь с хорошим дизайном API.
Есть предложение?

Я не эксперт в дизайне API Angular2, но что, если бы это выглядело так? Вместо того, чтобы указывать уровень масштабирования и центральную широту / долготу, вы просто задаете логическое значение fit-contents?

<sebm-google-map [fitContents]="true">
...
</sebm-google-map>

... или, может быть, директива атрибута?

<sebm-google-map sebmGoogleMapFitContents>
...
</sebm-google-map>

Было бы неплохо поддерживать привязку к маркерам. Предпочел бы [fitContents] = "true" в качестве атрибута

Я бы определенно предпочел [fitContents]="true" (или подобное имя) директиве атрибутов. Невозможно (насколько я знаю) легко переключить наличие директивы, а с логическим вводом легко переключаться между ними.

Также потенциально лучше для автозаполнения в IDE иметь ввод, чем директива (например, прямо сейчас в WebStorm вы набираете [ и получаете предложения всех вводов - директивы пока обрабатываются не так хорошо).

Я изучаю следующее требование:

Мне нужно настроить автоматическое масштабирование / центрирование карты на основе отображаемых точек.
на основе API Google и этой библиотеки, похоже, мне нужно создать объект "bounds" и вызвать .extend для каждого маркера, который мне нужно показать, а затем установить или привязать свойство fitBound.
где я застрял прямо сейчас, это то, как заполнить объект границ данными.
У меня проблемы с созданием объекта LatLng.
в коде я вижу интерфейс, у которого есть методы, но нет класса, реализующего интерфейс
а интерфейс latlng говорит, что lat и lng - это методы, а не свойства.
что мне не хватает на этой картинке ??

Не могли бы вы предоставить образец решения или фрагмент кода для увеличения области маркеров с помощью подходящих границ?

Подумал об этом. «Соответствие содержания» для меня больше похоже на действие, чем на свойство, которое можно включить или выключить.

Немного мозгового штурма:

• Служба с методом .fitContent() который вызовет изменение latitude / longitude / zoom (которое может быть регулярно обнаружено как событие из соответствующих выходов centerChange / zoomChange ). Но как указать, на какой карте это применить? Мой DI заржавел. Нам может потребоваться получить доступ к экземпляру компонента с помощью @ViewChild .
• Если нам все равно нужно @ViewChild , мы могли бы сделать общедоступный .fitContent() внутри самого компонента, без службы.
• Мы могли бы передать наблюдаемый объект, на который компонент будет подписываться и внутренне вызывать .fitContent() при каждом запуске.

Наиболее распространенный вариант использования - всегда помещать все маркеры на карту. Для этого мы могли бы предоставить директиву / ввод, которая будет выполнять .fitContent() всякий раз, когда обнаруживается изменение в маркерах.

Не стесняйтесь обсуждать API / поведение здесь. На этой неделе я сделаю несколько прототипов, чтобы посмотреть, к чему это приведет.

Мы с коллегой сами решили это с помощью директивы.
Директива добавляется к элементу sebm-google-map следующим образом (где [fitContents] - наша настраиваемая директива):

<sebm-google-map
                [fitContents]="fitContents"
                #bounds=fitContentsDirective
                [fitBounds]="bounds.mapBounds">
</sebm-google-map>

Директива fitContents имеет вход Subject<Coordinates[]> . Каждый раз, когда происходит обновление маркеров карты, тема обновляется с помощью fitContents.next(coordinates) где «координаты» - это полный список координат, которые должны уместиться на карте.
У директивы есть общедоступное свойство mapBounds . Это свойство содержит объект google LatLngBounds который передается во вход [fitBounds] sebm-google-map.

Шаблон html может выглядеть некрасиво, но он отлично работает до тех пор, пока не придет какая-то официальная поддержка.

Директива доступна здесь: https://gist.github.com/glenngr/8b64194b86e4101386db22999813af10.
Вход, комментарии и улучшения приветствуются.

Если бы аналогичная концепция была введена в компонент angular2-google-maps, возможно, можно было бы исключить какой-то менее красивый синтаксис html.

@jongunter @VaseemMalik @lazarljubenovic спасибо, ребята, за отличное обсуждение здесь!

Я действительно начал работать над этим несколько дней назад. Это еще не работает, но вы должны понять:
https://github.com/SebastianM/angular2-google-maps/pull/868

Комментарии / идеи приветствуются!

какие-нибудь обновления по этому поводу?

Есть обновления?

Есть обновления?

Будет следующим, что я закончу после приземления # 1044

Большой!

Здесь для одного многоугольника

`` ''
public findCenterBounds (): LatLngBoundsLiteral {
let mostEast = this.paths.reduce ((acc, v) => (acc.lng <v.lng)? v: acc);
let mostWest = this.paths.reduce ((acc, v) => (acc.lng> v.lng)? v: acc);
let mostNorth = this.paths.reduce ((acc, v) => (acc.lat <v.lat)? v: acc);
let mostSouth = this.paths.reduce ((acc, v) => (acc.lat> v.lat)? v: acc);
возвращаться{восток: mostEast.lng, запад: mostWest.lng, север: mostNorth.lat, юг: mostSouth.lat};
}

this._mapsApiWrapper.fitBounds (this.findCenterBounds ());

@piotrmach Вверх! большой!

Если вам нужны только две точки, упрощение на основе решения

public findCenterBounds(): LatLngBoundsLiteral {

    let a = this.origin;
    let b = this.destination;

    let mostEast  = (a.longitude > b.longitude) ? a.longitude : b.longitude;
    let mostWest  = (a.longitude < b.longitude) ? a.longitude : b.longitude;
    let mostNorth = (a.latitude > b.latitude) ? a.latitude : b.latitude;
    let mostSouth = (a.latitude < b.latitude) ? a.latitude : b.latitude;
    return <LatLngBoundsLiteral>{east: mostEast, west: mostWest, north: mostNorth, south: mostSouth };
  }

И не забудьте правильно ввести собственный API, см. Https://stackoverflow.com/questions/44315771/setcenter-not-working-in-angular2-google-maps

Мне потребовалось время, чтобы понять, почему fitBounds ничего не делает. Документов AGM не существует. (грустное лицо)

Есть новости по этому поводу?

Есть обновления?

Есть обновления?

Есть обновления?

Я тоже очень заинтересован в обновлении.

Есть обновления?

Есть обновления?

+1 :)

Мне нужно привязать карту к моему маркеру при загрузке. Вот как я решил это сейчас:

<agm-map (mapReady)="storeMapReady($event)">
    <agm-marker *ngFor="let store of storesList" [latitude]="store.latitude" [longitude]="store.longitude"></agm-marker>
</agm-map>

public storeMapReady(map){
    this.storeMap = map;
    this.storeMap.fitBounds(this.findStoresBounds());
}

public findStoresBounds(){
    let bounds:LatLngBounds = new google.maps.LatLngBounds();

    for(let store of this.storesList){
      bounds.extend(new google.maps.LatLng(store.latitude, store.longitude));
    }

    return bounds;
}

@adrienlamotte, не могли бы вы поделиться полным примером вышеупомянутого примера, это действительно решило бы мою проблему .. Заранее спасибо.

@MadhuAloor хорошо, я разместил весь важный код ... Остальное зависит от вашего приложения! Какую часть вы не понимаете?

@adrienlamotte, можешь поделиться... этот кусок .. Я пытаюсь использовать это свойство agm map [fitBounds] = "bounds.mapBounds", но не знаю, как назначить массив широты и долготы mapBounds .. Не могли бы вы помочь мне с этим

@adrienlamotte @SebastianM @lazarljubenovic @glenngr Я новичок в использовании карт agm и Angular 4 в целом, я заполнил свою карту маркерами из данных в массиве, как я могу получить данные только тех маркеров, которые можно увидеть на map, а не все, только те, которые видны на карте после увеличения, я не знаю, возможно ли это с помощью mapBounds. Если это так, я бы не отказался от помощи и советов в этом

@dwale Пожалуйста, не используйте трекер проблем GitHub для запросов в

@adrienlamotte Большое спасибо !! Ваше решение полностью решило мою проблему !!

Спасибо @adrienlamotte

Есть обновления?
@adrienlamotte Я делаю то же самое, что и вы, но карта сильно уменьшена.

public storeMapReady(map): void {
        this.map = map;
        this.findBounds(this.map);
    }

    public findBounds(map):void  {
        let bounds = new google.maps.LatLngBounds(null);
        for (let i = 0; i < this.visibleFilteredActivities.length; i++) {
            bounds.extend(new google.maps.LatLng(this.visibleFilteredActivities[i].geoPoint.latitude, this.visibleFilteredActivities[i].geoPoint.longitude));
        }
        map.fitBounds(bounds);
    }

@Defmetalhead не знает, является ли это проблемой ссылки с объектом 'map'. Вы можете попробовать это

public storeMapReady (карта): void {
this.map = map;
this.map.fitBounds (this.findBounds ());
}

public findBounds (): void {
let bounds = new google.maps.LatLngBounds (null);
for (let i = 0; i <this.visibleFilteredActivities.length; i ++) {
bounds.extend (новый google.maps.LatLng (this.visibleFilteredActivities [i] .geoPoint.latitude,
this.visibleFilteredActivities [i] .geoPoint.longitude));
}
границы возврата;
}

: up: голосование за автоматическое отображение границ карты для создателей / элементов

так что есть новости для обновления?

Beta 4 Поддерживает это сейчас

@SebastianM Как мне загрузить новую бета-версию? Излучает ли fitbounds текущие координаты?

@syamlalz Codeblock / Markdown, пожалуйста! 🤢 Здесь

@SebastianM Конечно важная особенность. Обходной путь может быть следующим: вычислить среднюю точку точек (например, ломаной линии) и значение масштабирования, чтобы вручную установить широту и долготу, а также масштаб.

Подгонка к границам может быть атрибутом элемента чертежа (например, полилинии). Если элемент готов (визуализирован) один раз / после изменения, карта может соответствовать границам.
Или сама карта получает атрибут со ссылкой (например, #myPolyline ) для вычисления и соответствия границам. (Для каждого набора входов.)

<agm-map [fitBounds]="myPolyline">
  <agm-polyline #myPolyline>...</agm-polyline>
</agm-map>

Компонент input fitBounds должен проверить, требуется ли повторное вычисление границ.
В противном случае обнаружение изменений Angulars снизит производительность.
Просто спонтанная идея. Не уверен, работает ли это.