Как динамически загрузить адрес во встроенной карте Google?

0

Потерпите меня, пожалуйста, потому что я N00b. Я создаю приложение Ionic с Firebase и AngularJS.
То, что я пытаюсь сделать, это загрузить карту с адресом, взятым из базы данных. (Быть жестко закодированным - это не вариант). Я могу сделать это как внешнюю ссылку следующим образом:

<a href="http://maps.google.com/?q={{task.street}}, {{task.city}}, {{task.zip}}">See Location</a>

и он работает, но он открывается на веб-страницы google maps (что не подходит для приложения) Итак, я попытался внедрить карту в iframe следующим образом:

 <iframe
         ng-controller="BrowseCtrl"
         width="100%"
         height="450px"
         frameborder="0" style="border:0"
         src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
       </iframe>

но я не могу заставить его работать. Я предполагаю, что iframe является "вне" страницы и не распознает динамические данные. Кто-нибудь знает, как я могу динамически загружать адрес во встроенную карту, или есть ли лучший способ сделать это, используя AngularJS? В идеале, я хотел бы иметь все функции, доступные в самом приложении, даже если это означает, что вам нужно перейти на оплаченную службу. На данный момент я пытаюсь просто вставить карту.

Заранее спасибо!

Update1

Я еще не нашел исправления, но я думаю, что нашел проблему. В консоли появляется сообщение об ошибке: "требуется доверенное значение", а затем ссылки на это, docs.angularjs.org/api/ng/service/$sce Мне нужно будет прочитать это и вернуться

Обновление 2

Я добавил это к контроллеру:

$scope.trustedURL = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxx");

И изменил html на это:

 <iframe

     width="100%"
     height="450px"
     frameborder="0" style="border:0"
     ng-src="{{trustedURL}}" allowfullscreen>
   </iframe>

Это фиксировало ошибку "требуется доверенное значение", но я все равно получаю тот же результат - карту со случайным образом сгенерированным местоположением. Он не распознает динамически загруженные данные в {{}}. Есть предположения???

  • 0
    Вы пытались создать весь URL и использовать его в качестве src? т.е. src = "{{mapURL}}"?
  • 0
    Я не думаю, что это сработает. Улица, город и почтовый индекс - это отдельные поля в базе данных. Они вводятся внешними пользователями в форме, а не администратором, и эта информация сохраняется в базе данных. Когда страница извлекается с данными, карта также должна показывать их местоположение
Показать ещё 2 комментария
Теги:
google-maps
dynamic
iframe

3 ответа

0

Шаг 1

Использование HTML внутри html

 [src]=methodToGetURL()

methodToGetURL: функция, возвращающая httl url из файла компонента

EXAMPLE- iframe

[src]="methodToGetURL()" allowfullscreen  /iframe'

Шаг 2) компонентный файл

Добавить DomSanitizer:

import {DomSanitizer} from '@angular/platform-browser';

функция:

methodToGetURL() 'enter code here'{
        return this.domSanitizer.bypassSecurityTrustResourceUrl('https:Your  URL here');
}
Поделиться
0

Используйте его так:

<iframe
    ng-src="{{ 'https://www.google.com/maps/embed/v1/place?q=' + task.street + ',' + task.city + ',' + task.zip + '&key=xxxxxxxx' }}">
</iframe>
Поделиться
0

Попробуйте использовать ng-src вместо src

 <iframe
         ng-controller="BrowseCtrl"
         width="100%"
         height="450px"
         frameborder="0" style="border:0"
         ng-src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
  </iframe>
Поделиться
  • 0
    К сожалению, это не имело значения. Я получаю карту, но со случайно сгенерированным адресом. Он не распознает переменные, извлекаемые из базы данных {{task.city}} и т. Д.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню