嵌入信息窗口（Google Maps API）中的表單的獨特ng模型

每次點擊google地圖時，我都會創建一個標記，每個標記都有一個包含表單的信息窗口。但是，所有信息窗口上的表單最終都有相同的文本，這不是我想要的。如何使用不同的文字創建不同的表單？嵌入信息窗口（Google Maps API）中的表單的獨特ng模型

這裏是我的代碼：

的Html

<ng-map center="[40.74, -74.18]" map-type-control-options="{style:'HORIZONTAL_BAR', position:'BOTTOM_CENTER'}" zoom="3" style="height:30em;" on-click="addNewMarker(event)">

的Javascript：

$scope.all_forms = []; 
$scope.addNewMarker = function(e) 
{ 
    var form = '<div id="form_canvasform" >' + 
        '<form name="form_canvas">' + 
        '<textarea class="form-control" required placeholder="Your Text..." ng-model="mk[$scope.all_forms.length].text">{{all_forms}}</textarea><br/>' + 
        '<button class="btn btn-default" ng-click="uploadNewImageMap()" ng-model="mkimage" id="markerJs">Upload Image</button>' + 
        '<button class="btn btn-default" ng-click="uploadNewVideoMap()" ng-model="mkvideo" id="markerJs3">Upload Video</button><br/>' + 
        '</form>' + 
       '</div>'; 

    var form_compiled = $compile(form)($scope); 

    $scope.all_forms.push(form_compiled); 


    all_infoWindow[markerCounter] = new google.maps.InfoWindow({content:$scope.all_forms[$scope.markerCounter][0]}); 
    all_markers[markerCounter] = new google.maps.Marker({position: e.latLng, map: map, draggable:true}); 

    infoWindow.open(map,marker); // not infoWindow.open(app,marker); 

    google.maps.event.addListener(infoWindow,'closeclick',function(){ 
     marker.setMap(null); 
    }); 

    google.maps.event.addListener(marker, 'position_changed', function() { 
     if(infoWindow.getMap()){ 
      infoWindow.open(map,this); 
     } 
     }); 
     $scope.markerCounter += 1; 
    }

圖片：

任何幫助表示讚賞。

來源

2016-10-13 imraj

通過閱讀文檔，InfoWindow有非常有限的選擇，如果你想定製它，特別是設置其內容。

我建議您使用infobox而不是infowindow。

在本GitHub文章中提到：

一個信息框的行爲像一個google.maps.InfoWindow，但它支持先進的造型幾個附加屬性。

隨着越來越多的性能與infowindow使用的選項相比，定型的內容或整個窗口是通過簡單地使幾個參數更容易。

請檢查給出的GitHub post的示例實現代碼。

最後，本SO後給出的解決方案 - Google Maps API v3: Custom styles for infowindow也可能有幫助。

來源

2016-10-13 16:12:07 Teyam

嵌入信息窗口（Google Maps API）中的表單的獨特ng模型

回答

相關問題