我正在使用angularjs的方形主题并使用他们的map指令生成这样的地图：
<map class="ui-map" zoom="7" center="[32.794065, -97.439365]" style="height:250px !important;" >
</map>
这是在搜索页面上，当用户搜索任何位置（文本地址）时，它会相应地自动生成引脚到地图。
现在的问题是它会生成引脚但不会在引脚生成的位置移动或缩放地图。
问题：
答案 0 :(得分：1)
我已经实现了一个不错的搜索，您可以从这里查看源代码
}]）
.directive('map', ['$compile', '$templateCache', '$timeout', 'Geo', 'Drive', function($compile, $templateCache, $timeout, Geo, Drive) {
return {
restrict: 'C',
template: '<div>A</div>',
replace: true,
scope: {
dealers: '=',
search: '=',
searching: '='
},
link: function(scope, ele, attrs) {
var body = angular.element(document.querySelector('body'));
console.log(body);
var markers = [];
var center = [-94.2861328, 56.2571657];
function clearOverlays() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
}
var latlng = new google.maps.LatLng(56.2571657, -94.2861328);//(45.8, -72);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(ele[0], myOptions);
var geocoder = new google.maps.Geocoder();
scope.windowInfo = {
title: 'window',
desc: 'desc'
}
var infoWindowTemplate = $templateCache.get('infoWindowTemplate').trim();
var infoWindowElem = $compile(infoWindowTemplate)(scope);
window.infowindow = new google.maps.InfoWindow({
content: infoWindowElem[0],
disableAutoPan: true,
maxWidth: Math.min(480, window.innerWidth)
});
function makeBounds(data) {
return new google.maps.LatLngBounds(
new google.maps.LatLng(data.southwest.lat,data.southwest.lng),
new google.maps.LatLng(data.northeast.lat,data.northeast.lng))
}
scope.$watch('search', function(a) {
clearOverlays();
var code = ('' + a).replace(/ /g, '').toUpperCase();
if (a && code !== a) {
scope.search = code;
}
if (a && (a.length === 3 || a.length === 6)) {
scope.searching = true;
Drive.geocode(a).then(function(data) {
scope.searching = false;
if (!data) {
scope.search = '';
return;
}
center = data;
var postal_rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.1,
map: map,
bounds: makeBounds(data[2])});
markers[markers.length] = postal_rectangle;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[1], data[0]),
title: a.toUpperCase(),
icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png'//http://labs.google.com/ridefinder/images/mm_20_red.png'//'home.png'//'http://maps.google.com/mapfiles/kml/shapes/arrow.png'
});
markers[markers.length] = marker;
scope.OK = function() {
map.setCenter(marker.getPosition());
map.setZoom(8);
window.infowindow.close();
}
scope.dealers.forEach(mapDealer);
scope.OK();
});
}
});
var delay = 10;
function addMarker(dealer, lat, lng) {
var dist = Geo.distance(center, lat, lng);
if (dist > 201) return;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
title: dealer[0]
//icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
});
google.maps.event.addListener(
marker, 'mousedown', function() {
body.addClass('wait');
window.infowindow.close();
$timeout(function() {
map.setCenter(marker.getPosition());
map.setZoom(11);
scope.windowInfo.title = dealer[0];
scope.windowInfo.address = dealer[1].replace('', '');
scope.windowInfo.telephone = dealer[2];
scope.windowInfo.distance = dist.toFixed(0)
window.infowindow.setOptions({maxWidth: Math.min(480, window.innerWidth)});
window.infowindow.open(marker.get('map'), marker);
body.removeClass('wait');
}, 100);
});
marker.infowindow = infowindow;
markers[markers.length] = marker;
marker.orderid = markers.length;
}
function mapDealer(dealer, index) {
var found = !!(dealer, dealer[3] && dealer[3].length && dealer[4] && dealer[4].length && true);
if (found) {
delay += 10;
} else {
delay += 750;
}
setTimeout(function() {
if (found) {
addMarker(dealer, parseFloat(dealer[3]), parseFloat(dealer[4]));
} else {
var parts = dealer[1].split(/(?:,\s?)/gi);
var options = {
'address': parts[0]
};
var code = /([A-Z][0-9][A-Z] [0-9][A-Z][0-9])/gi.exec(dealer[1])[0];
if (code) {
options.componentRestrictions = { postalCode: code,
country: 'CA'};
}
geocoder.geocode(options, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
dealer[3] = results[0].geometry.location.lat();
dealer[4] = results[0].geometry.location.lng();
console.log(dealer);
addMarker(dealer, parseFloat(dealer[3]), parseFloat(dealer[4]));
} else {
console.log(options, arguments);
}
});
}
}, delay);
};
}
};
}])
;