Question

我在我的角度应用程序上为我的谷歌地图做了一个指令。纬度和经度在指令中是硬编码的。我试图从我的服务中获取这些坐标，就像我获取位置名称和描述一样。

<h2 class="page-title">{{ locationInfo.name }}</h2>

<img ng-src="{{ locationInfo.images[0].scenic}}" alt="">

<p>{{ locationInfo.description }}</p>

<gmap id ="map-canvas" class="map"></gmap>

我的指令目前看起来像这样，它提供静态地图而不是动态改变

.directive("gmap", function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var latLng = new google.maps.LatLng(40, -73);
            var mapOptions = {
                zoom: 15,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);

            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
        }
    }
});

Answer 1

首先，您应该使用＆＃34;元素＆＃34;而不是使用document.getElementById。您在链接函数中注入的属性。那个＆＃34;元素＆＃34;是与DOM元素对应的角度对象。如果您不能使用它，那么继续使用document.getElementById，但更改＆＃34; id＆＃34;动态。

另外，如果你想将它用作指令，我建议你使用纬度和经度的两个属性，并使用locationInfo对象的某些属性动态命名你的id：

<gmap id ="map-canvas_{{locationInfo.name}}" lat="locationInfo.lat" lon="locationInfo.lon" class="map"></gmap>

其中locationInfo包含名为lat和lon的纬度和经度信息。

然后在你的指令中，你通过attrs对象读取你的标签atritubes：

.directive("gmap", function () {
   return {
       ...
       // Here you read your tag attributes "lat" and "lon"
       link: function(scope, element, attrs) {
            var latLng = new google.maps.LatLng(attrs.lat, attrs.lon);
            // Here you can use the injected "element" instead of "document.getElementById(attrs.id)" but it seems it doesn't work for you
            var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
       }
   }
 });

我还建议使用逗号＆＃34;，＆＃34;来定义变量。如：

 var a = something,
     b = somethingElse,
     c = anything;

而不是使用几个＆＃34; var＆＃34;句子。这是一个很好的做法。

希望这有帮助。

使用angular将服务中的坐标传递给指令

1 个答案: