angularjs - How to relocate marker with ng-autocomplete -
i separated map initialize function , ng-autocomplete 2 directive
one called my-map , other 1 ng-autocomplete
my goal relocate marker while click prediction of autocomplete
but unable pass basic variable my-map directive
ng-autocomplete directive
so how relocate marker? please ! !
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 map function initmap() { if (map === void 0) { map = new google.maps.map(element[0], options); } } // place 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 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 map , place markers initmap(); setmarker(map, new google.maps.latlng(23.5,121), 'my location', 'just content'); } //link function } //return }) .directive('ngautocomplete', function() { return { require: 'ngmodel', scope: { ngmodel: '=', options: '=?', details: '=?', }, link: function(scope, element, attrs, controller) { //options autocomplete var opts var watchenter = false //convert options provided 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()); // couldn`t map variable other directive 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 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 retrieve autocompletes first result using 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 value reverts, need set 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 directive scope.watchoptions = function () { return scope.options }; scope.$watch(scope.watchoptions, function () { initopts() }, true); } }; });
<div class="step_map_box" ng-controller="mapctrl 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>
Comments
Post a Comment