我正在尝试调整此脚本https://google-developers.appspot.com/maps/articles/mvcfun以使用google fusion表实现空间搜索。 第一步，默认搜索工作正常，但是当我尝试根据标记位置执行半径搜索时，问题出现并且拖动的标记永远不会“落地”。 我的目标是根据新中心和新边界更新查询。
感谢大家
<script type="text/javascript">
//geolocalizzo
var pos;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(initialize);
}else{
alert('La geo-localizzazione NON è possibile');
}
function initialize(position) {
var tableid ='XXXXXXXXXXXXX'
pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pos,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var distanceWidget = new DistanceWidget(map);
//recupero info su posizione etc etc
google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
displayInfo(distanceWidget);
extendsearch(distanceWidget);
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
displayInfo(distanceWidget);
extendsearch(distanceWidget);
});
var layer = new google.maps.FusionTablesLayer({
//setto gli infowindows
query: {
select: 'latitudine',
from: tableid,
where: 'ST_INTERSECTS(latitudine, CIRCLE(LATLNG('+ pos.lat()+', '+pos.lng()+' ),2000))'
},
//setto gli stili
styles: [{
where: 'id=3',
markerOptions: {
iconName: "blu_blank"
}
},
{
where: 'id=1',
markerOptions: {
iconName: "red_blank"
}
}],
});
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function(e) {
e.infoWindowHtml = '<div class="googft-info-window"'+
'style="font-family: sans-serif; width: 350px; height: 20em; overflow-y: auto;">'+
'<table><tr><td><img src="'+e.row['immagine'].value+'"'+
'style="width: 100px; vertical-align: top; margin-left: .5em" /></td><td><h2 style="color: brown">'+e.row['Titolo'].value+'</h2></td></tr>'+ '<tr><td><h3 style="color: blue">'+e.row['descrizione'].value +'<br></h3></td></tr>' +
//'<tr><td><b>il job è stato creato il :<br></b>'+e.row['dcreazione'].value+'<br></td> <td></td>' +
'<tr><td colspan="2"><b>Candidati entro il :</b> '+e.row['dscadenza'].value+'<br></td> </tr>'+
'<tr><td><h3 style="color: red">Fai la tua offerta</h3></td><td></td><td>'+
'<form action="'+e.row['joblink'].value+'">'+
'<input type="submit" value="Offri"></form></td></tr></table>'+
//'Offri </button> <a href=\''+e.row['joblink'].value+'\' target=\'_blank\'>clicca qui</a></td></tr></table>'+
'</div>';
});
}
/**
* A distance widget that will display a circle that can be resized and will
* provide the radius in km.
*
* @param {google.maps.Map} map The map to attach to.
*
* @constructor
*/
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
draggable: true,
title: 'Move me!'
});
// Bind the marker map property to the DistanceWidget map property
marker.bindTo('map', this);
// Bind the marker position property to the DistanceWidget position
// property
marker.bindTo('position', this);
//mostro infor di partenza
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('Tu sei qui, spostami per farte altre ricerche');
infowindow.open(map, marker);
// Create a new radius widget
var radiusWidget = new RadiusWidget();
// Bind the radiusWidget map to the DistanceWidget map
radiusWidget.bindTo('map', this);
// Bind the radiusWidget center to the DistanceWidget position
radiusWidget.bindTo('center', this, 'position');
// Bind to the radiusWidgets' distance property
this.bindTo('distance', radiusWidget);
// Bind to the radiusWidgets' bounds property
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/**
* A radius widget that add a circle to a map and centers on a marker.
*
* @constructor
*/
function RadiusWidget() {
var circle = new google.maps.Circle({
strokeWeight: 1,
clickable:false
});
// Set the distance property value, default to 50km.
this.set('distance', 2);
// Bind the RadiusWidget bounds property to the circle bounds property.
this.bindTo('bounds', circle);
// Bind the circle center to the RadiusWidget center property
circle.bindTo('center', this);
// Bind the circle map to the RadiusWidget map
circle.bindTo('map', this);
// Bind the circle radius property to the RadiusWidget radius property
circle.bindTo('radius', this);
// Add the sizer marker
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
/**
* Update the radius when the distance has changed.
*/
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
/**
* Add the sizer marker to the map.
*
* @private
*/
RadiusWidget.prototype.addSizer_ = function() {
var sizer = new google.maps.Marker({
draggable: true,
title: 'Drag me!',
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function() {
// Set the circle distance (radius)
me.setDistance();
});
};
/**
* Update the center of the circle and position the sizer back on the line.
*
* Position is bound to the DistanceWidget so this is expected to change when
* the position of the distance widget is changed.
*/
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
// Bounds might not always be set so check that it exists first.
if (bounds) {
var lng = bounds.getNorthEast().lng();
// Put the sizer at center, right on the circle.
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
/**
* Calculates the distance between two latlng locations in km.
* @see http://www.movable-type.co.uk/scripts/latlong.html
*
* @param {google.maps.LatLng} p1 The first lat lng point.
* @param {google.maps.LatLng} p2 The second lat lng point.
* @return {number} The distance between the two points in km.
* @private
*/
RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371; // Radius of the Earth in km
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
/**
* Set the distance of the circle based on the position of the sizer.
*/
RadiusWidget.prototype.setDistance = function() {
// As the sizer is being dragged, its position changes. Because the
// RadiusWidget's sizer_position is bound to the sizer's position, it will
// change as well.
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = this.distanceBetweenPoints_(center, pos);
// Set the distance property for any objects that are bound to it
this.set('distance', distance);
};
//display info
function displayInfo(widget) {
var info = document.getElementById('info');
info.innerHTML = 'Position: ' + widget.get('position') + ', distance: ' +
widget.get('distance');
}
function extendsearch(widget){
layer.setOptions({
query: {
select: 'latitudine',
from: tableid,
where: 'ST_INTERSECTS(latitudine, CIRCLE(LATLNG('+ widget.get('position')+' ),'+ widget.get('distance')+'))'
},
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
答案 0 :(得分：0)
我解决了我的问题。 这是我做的：
在addSizer_中我还绑定了sizer距离属性sizer.bindTo（'ndistance'，this，'distance'）;
google.maps.event.addListener(sizer, 'dragend', function() {
layer.setOptions({
query: {
select: 'latitudine',
from: tableid,
where: 'ST_INTERSECTS(latitudine, CIRCLE(LATLNG('+marker.getPosition().lat()+','+ marker.getPosition().lng()+'),'+sizer.get('ndistance')*1000+'))'
}
});
layer.setMap(map);
});