我有一个rails应用程序,用户可以在地图上绘制位置,保存后,使用javascript和gmap3.js将latlng保存在隐藏字段中。
地图和标记正在显示,但是latlng正在保存为nil。
代码最近没有改变,但我注意到控制台现在说地图v = 3.9现在已经退役了。我尝试将其更改为v = 3,但这没有帮助。
我不明白这个js但是除了纬度和经度返回undefined之外它似乎工作得很好。我应该从头开始重建功能还是专注于API?
Application.html.haml:
= javascript_include_tag 'http://maps.google.com/maps/api/js?v=3.9'
plotLocations.js:
$.fn.plotLocations = function(){
var $form = this;
if ($form.length === 0) { return false; }
var centre = $form.find('#locations').data('centre');
var locations = {};
function updateLocations(id, latLng) {
locations[id] = latLng;
}
function removeLocation(id) {
delete locations[id];
}
function setupInfoBoxForCross(marker){
$('.infoBox').remove();
$map = $('#locations');
var html = '<div>' +
'<a href="javascript:;" id="marker_' +
marker.__gm_id +
'">' +
'<img src="/assets/map_icon_remove.png">' +
'</a>' +
'</div>' ;
var myOptions = {
content: html,
disableAutoPan: false,
maxWidth: "15px",
pixelOffset: new google.maps.Size(0, -60),
zIndex: null,
boxStyle: {
background: "white",
opacity: 0.75,
width: "09px",
height: "15px"
},
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
ib.open(marker.map, marker);
google.maps.event.addListener(ib,'domready',function(){
$('.infoBox a#marker_' + marker.__gm_id).click(function(e){
marker.setMap(null);
removeLocation(marker.__gm_id);
ib.close();
e.stopPropagation();
});
});
}
$("#locations").gmap3({
marker:{
values: _.map($('#locations').data('locations'),function(item){return {'latLng': item};}),
options:{
draggable: true,
icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/marker.png')
},
events: {
dragend: function(marker, event){
updateLocations(marker.__gm_id, event.latLng);
},
mouseover: function(marker, event, context){
setupInfoBoxForCross(marker, event, context);
},
mouseout: function(marker, event, context){
}
},
callback: function(markers){
_.each(markers, function(marker){
updateLocations(marker.__gm_id, marker.position);
});
}
},
map: {
options: {
center: centre,
zoom: 13,
mapTypeControl: false,
zoomControl: true,
scrollwheel: true,
streetViewControl: false
},
events: {
click: function(map, event) {
this.gmap3({
marker: {
latLng: event.latLng,
options: {
draggable: true,
icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/marker.png')
},
events: {
dragend: function(marker, event){
updateLocations(marker.__gm_id, event.latLng);
},
mouseover: function(marker, event, context){
setupInfoBoxForCross(marker, event, context);
}
},
callback: function(marker){
updateLocations(marker.__gm_id, event.latLng);
}
}
});
}
}
}
});
$form.submit(function(e){
if ( _.keys(locations).length > 0 ){
var list = _.map(_.values(locations), function(item){ return _.values(item); });
$form.find('#project_locations').val(JSON.stringify(list));
}
});
};