谷歌地图嵌入api错误错误:[$interpole:nooncat]插值时出错

Google Maps embed api error Error: [$interpolate:noconcat] Error while interpolating

本文关键字：错误 nooncat 插值 出错 interpole api 谷歌地图      更新时间：2023-09-26

我正试图使用谷歌地图api来显示json文件中数据的地图，但当我尝试使用json数据时，我会收到错误"错误：[$interpole:nooncat]插值时出错"

<iframe id="map" width="750" height="450" frameborder="0" style="border:0" ng-src="https://www.google.com/maps/embed/v1/place?q={{office.LocAddressline1}}&key=AIzaSyBGAHnplGPjFoVvShk6Tsna3-DN8rHQBI8" allowfullscreen></iframe>

我试过只使用"src"而不是"ng src"，我也试过使用"trustSrc"都不起作用。据我所知，这是因为数据在加载之前就被访问了，但我不知道如何在html中绕过这一点，在javascript中，我可以在访问数据之前先检查数据是否已加载。

之所以会发生这种情况，是因为您将多个表达式绑定到src或ng-src。您需要将声明与URL分开。表达式中的字符串串联不起作用，因为在加载数据之前正在访问数据，就像您的情况一样。

SO已经为这个问题提供了解决方案，你可以看看这一个问题，第二个回答可能会解决你的问题。

AngularJS多个表达式在插值中与URL 连接

希望这有帮助！！

我也遇到了同样的问题。你可以这样做。您需要在控制器中注入$sce服务。

 $scope.LocationURL=$sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q=" + $scope.office.LocAddressline1 +"&key=AIzaSyBGAHnplGPjFoVvShk6Tsna3-DN8rHQBI8");

然后在你的html页面

<iframe id="map" width="750" height="450" frameborder="0" style="border:0" src="{{LocationURL}}" allowfullscreen></iframe>
相关文章：