Потерпите меня, пожалуйста, потому что я 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>
Это фиксировало ошибку "требуется доверенное значение", но я все равно получаю тот же результат - карту со случайным образом сгенерированным местоположением. Он не распознает динамически загруженные данные в {{}}. Есть предположения???
Шаг 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');
}
Используйте его так:
<iframe
ng-src="{{ 'https://www.google.com/maps/embed/v1/place?q=' + task.street + ',' + task.city + ',' + task.zip + '&key=xxxxxxxx' }}">
</iframe>
Попробуйте использовать 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>