角谷歌地图：在信息窗口把图像 [英] Angular google maps: put image in Info window

问题描述

我使用谷歌地图API的角度（ https：//开头angular-ui.github.io/angular-google-maps/#!/api/windows ）来显示上有一个标记的地图。该标记点，有一个几个段落和图片标签。

段落所述的内容显示正确的，但不是图像。它的网址是正确的。可以添加图像？

有些code：
HTML

 ＆LT; UI-GMAP，谷歌地图中心='datos.mapa.center'选项=datos.mapa.opciones变焦='datos.mapa.zoom'＆GT;
        ＆LT; UI-GMAP-标记COORDS =datos.marker_club.coords
                        选项​​=datos.marker_club.options
                        idkey =datos.marker_club.id
                        点击=markerClick＆GT;
            ＆LT; UI-GMAP窗口显示=datos.marker_club.show
                closeClick =markerClose（标记）＆GT;
                ＆LT; D​​IV＆GT;＆LT; IMG类=mapa_escudoSCR ={{datos.escudo}}WIDTH =32高度=32/>{{datos.club}}<br /＆GT;塞德{{datos.sede}}＆LT; / DIV＆GT;
            ＆LT; / UI-GMAP窗口＆GT;
        ＆LT; / UI-GMAP-标记＆GT;
    ＆LT; / UI-GMAP，谷歌地图＆GT;
 

JS

  $ scope.datos.club ='俱乐部';
    $ scope.datos.sede ='塞德';
    $ scope.datos.escudo ='http://www.server.com/image.png';
 

  uiGmapGoogleMapApi.then（功能（图）{
              $ scope.datos.mapa = {中心：{纬度：latitud，经度：longitud}，变焦：变焦};
              $ scope.datos.mapa.opciones = {滚轮：真正};              VAR图标=htt​​p://maps.google.com/mapfiles/ms/icons/orange-dot.png;
          $ scope.datos.marker_club = {ID：1，
                                          COORDS：{纬度：latitud，经度：longitud}，
                                          选项​​：{
                                                  拖动：假的，
                                                  图标：新google.maps.MarkerImage（图标），
                                          }，
              }; $ scope.markerClick =功能（标记，eventName的，型号）{
    $ scope.datos.marker_club.show = $ scope.datos.marker_club.show！;
};$ scope.markerClose =功能（标记）{
   $ scope.datos.marker.show = FALSE;
};
 

解决方案

对不起，只是缺少NG-SRC，在图像的清晰度！

I use google maps api angular (https://angular-ui.github.io/angular-google-maps/#!/api/windows) to display a map with a mark on it. The marked point, has its label with a few paragraphs and a picture.

The content of paragraphs displayed correctly, but not the image. The url of it is correct. Can add an image?

Some code: HTML

    <ui-gmap-google-map center='datos.mapa.center' options="datos.mapa.opciones" zoom='datos.mapa.zoom'>
        <ui-gmap-marker coords="datos.marker_club.coords" 
                        options="datos.marker_club.options" 
                        idkey="datos.marker_club.id"
                        click="markerClick" >
            <ui-gmap-window show="datos.marker_club.show"  
                closeClick="markerClose(marker)" >
                <div><img class="mapa_escudo" scr="{{datos.escudo}}" width="32" height="32" />{{datos.club}}<br />Sede {{datos.sede}}</div>
            </ui-gmap-windows>
        </ui-gmap-marker>
    </ui-gmap-google-map>

JS

    $scope.datos.club               = 'Club';
    $scope.datos.sede               = 'Sede';
    $scope.datos.escudo             = 'http://www.server.com/image.png';

      uiGmapGoogleMapApi.then(function(maps) {
              $scope.datos.mapa           = { center: { latitude: latitud, longitude: longitud }, zoom: zoom };
              $scope.datos.mapa.opciones  = { scrollwheel: true };        

              var icon = "http://maps.google.com/mapfiles/ms/icons/orange-dot.png";
          $scope.datos.marker_club = {    id: 1,
                                          coords: { latitude: latitud, longitude: longitud},
                                          options:{ 
                                                  draggable: false, 
                                                  icon: new google.maps.MarkerImage(icon),
                                          },
              };      $scope.markerClick = function(marker, eventName, model) {
    $scope.datos.marker_club.show = !$scope.datos.marker_club.show;
};

$scope.markerClose = function(marker) {
   $scope.datos.marker.show = false;
};

解决方案

Sorry, just missing "ng-src" in the definition of the image!

这篇关于角谷歌地图：在信息窗口把图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！