Я пытаюсь создать угловую директиву для отображения Карт Google.AngularJS Директива GoogleMap
Вот моя директива:
'use strict';
var CartoBundle = angular.module('CartoBundle', []);
CartoBundle.directive('cartoBundleMap', function() {
var map;
return {
restrict: 'EA',
replace: true,
template: '<section id="map"></section>',
scope: {
zoom: "@",
zoomControl: "=",
fullScreenControl: "=",
mapTypeControl: "=",
scaleControl: "=",
streetViewControl: "=",
mapTypeId: "@"
},
link: function(scope, element, attrs) {
var options = {
center: new google.maps.LatLng(46.52863469527167,2.43896484375),
zoom: 6,
zoomControl : true,
fullscreenControl : true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
mapTypeId: "hybrid"
};
if (scope.zoom) options.zoom = scope.zoom * 1;
if (scope.zoomControl) options.zoomControl = scope.zoomControl;
if (scope.fullScreenControl) options.fullScreenControl = scope.fullScreenControl;
if (scope.mapTypeControl) options.mapTypeControl = scope.mapTypeControl;
if (scope.scaleControl) options.scaleControl = scope.scaleControl;
if (scope.streetViewControl) options.streetViewControl = scope.streetViewControl;
if (scope.mapTypeId) options.mapTypeId = scope.mapTypeId;
map = new google.maps.Map(element[0], options);
},
};
});
Когда я делаю тест с помощью следующего HTML он отображает карту со всеми элементами управления (он работает):
<carto-bundle-map></carto-bundle-map>
Кроме того, когда я пытаюсь также устанавливаются текстовые значения:
<carto-bundle-map
map-type-id="satellite"
></carto-bundle-map>
Но когда я пытаюсь установить значения булевых значений, это не так (мой con trols остается):
<carto-bundle-map
zoom-control="false"
full-screen-control="false"
map-type-control="false"
scale-control="false"
street-view-control="false"
map-type-id="satellite"
></carto-bundle-map>
Последние вещи, которые я могу сказать, что если я настроить элементы управления в ложь непосредственно в директиве он работает, и мои управления исчезают.
Я читал где-то, потому что я должен был установить областей с «равно», но это уже дело:
scope: {
zoom: "@",
zoomControl: "=",
fullScreenControl: "=",
mapTypeControl: "=",
scaleControl: "=",
streetViewControl: "=",
mapTypeId: "@"
},
Может кто-нибудь помочь, как я новичок с angularjs.
С уважением
Есть много доступных библиотеки, которые позволяют использовать Google Maps в вашем угловом приложении (например: https://ngmap.github.io/). –