我将map initialize function和ng-autocomplete分成两个指令
一个叫做my-map，另一个是ng-autocomplete
我的目标是在点击自动完成预测时重新定位标记
但我无法将my-map指令中的基本变量传递给
ng-autocomplete指令
那我怎么能重新安置我的标记？请帮忙 ！ ！
angular.module( "mapDirective", [])
.directive('myMap', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
// var map, infoWindow;
var markers = [];
var latlng = new google.maps.LatLng(23.5,121);
var map,config;
var options = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
//init the map
function initMap() {
if (map === void 0) {
map = new google.maps.Map(element[0], options);
}
}
// place a marker
function setMarker(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'
};
var marker = new google.maps.Marker(markerOptions);
markers.push(marker); // add marker to array
google.maps.event.addListener(marker, 'click', function () {
// close window if not undefined
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
});
}
// show the map and place some markers
initMap();
setMarker(map, new google.maps.LatLng(23.5,121), 'my location', 'Just some content');
} //link function
} //return
})
.directive('ngAutocomplete', function() {
return {
require: 'ngModel',
scope: {
ngModel: '=',
options: '=?',
details: '=?',
},
link: function(scope, element, attrs, controller) {
//options for autocomplete
var opts
var watchEnter = false
//convert options provided to opts
var initOpts = function() {
opts = {}
if (scope.options) {
if (scope.options.watchEnter !== true) {
watchEnter = false
} else {
watchEnter = true
}
if (scope.options.types) {
opts.types = []
opts.types.push(scope.options.types)
scope.gPlace.setTypes(opts.types)
} else {
scope.gPlace.setTypes([])
}
if (scope.options.bounds) {
opts.bounds = scope.options.bounds
scope.gPlace.setBounds(opts.bounds)
} else {
scope.gPlace.setBounds(null)
}
if (scope.options.country) {
opts.componentRestrictions = {
country: scope.options.country
}
scope.gPlace.setComponentRestrictions(opts.componentRestrictions)
} else {
scope.gPlace.setComponentRestrictions(null)
}
}
}
if (scope.gPlace == undefined) {
scope.gPlace = new google.maps.places.Autocomplete(element[0], {});
}
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
var result = scope.gPlace.getPlace();
if (result !== undefined) {
if (result.address_components !== undefined) { //點一下對的地址
scope.$apply(function() {
scope.details = result;
controller.$setViewValue(element.val());
// I couldn`t get map variable from the other directive to relocate marker
console.log('result',result)
var place = result;
var mapCenter = place.geometry.location;
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
marker.setIcon(/** @type {google.maps.Icon} */({
url: 'http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png',
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
//-------------------------------------------------//
});
}
else {
if (watchEnter) {
getPlace(result)
}
}
}
})
//function to get retrieve the autocompletes first result using the AutocompleteService
var getPlace = function(result) {
// console.log('result',result)
var autocompleteService = new google.maps.places.AutocompleteService();
if (result.name.length > 0){
autocompleteService.getPlacePredictions(
{
input: result.name,
offset: result.name.length
},
function listentoresult(list, status) {
if(list == null || list.length == 0) {
scope.$apply(function() {
scope.details = null;
});
} else {
var placesService = new google.maps.places.PlacesService(element[0]);
placesService.getDetails(
{'reference': list[0].reference},
function detailsresult(detailsResult, placesServiceStatus) {
if (placesServiceStatus == google.maps.GeocoderStatus.OK) {
scope.$apply(function() {
controller.$setViewValue(detailsResult.formatted_address);
element.val(detailsResult.formatted_address);
scope.details = detailsResult;
//on focusout the value reverts, need to set it again.
var watchFocusOut = element.on('focusout', function(event) {
element.val(detailsResult.formatted_address);
element.unbind('focusout')
})
});
}
}
);
}
});
}
}
controller.$render = function () {
var location = controller.$viewValue;
element.val(location);
};
//watch options provided to directive
scope.watchOptions = function () {
return scope.options
};
scope.$watch(scope.watchOptions, function () {
initOpts()
}, true);
}
};
});<div class="step_map_box" ng-controller="mapCtrl as ctrl">
<div class="address_input_row row">
<div class="address_input_box col-md-4 col-md-offset-4">
<input type="text" class="demo_insert form-control address_input" id="demo_address_input"
ng-class="ctrl.addressInput(ctrl.step()==1)"
ng-required="false"
ng-model="ctrl.newItem.address"
ng-autocomplete="ctrl.newItem.address"
marker = "ctrl.map.marker"
ch-input-width
>
</div>
</div>
<div id="step_map" class="step_map" ng-style="ctrl.mapInview(ctrl.step()==1)" my-map></div>
</div>