1
我有一个使用Google Maps API添加标记并将其保存到php数据库的网站。当一个新的标记被添加到地图中时，它会打开一个InfoWindow，它显示一个用于提交数据并将其保存到数据库的表单。使用Google Map API保存标记 - 重定向到.php页面
形式为：
var WinnerForm = '<p><div class="winner-form">'+
'<form action="addwinner.php" method="POST" name="SaveMarker" id="SaveMarker">'+
'<label for="w_name"><span>Winner Name :</span><input type="text" name="w_name" class="save-name" placeholder="Name of Winner" maxlength="40"/></label>'+
'<label for="w_address"><span>Address :</span><textarea name="w_address" class="save-address" placeholder="Address of Winner" maxlength="150"></textarea></label>'+
'<label for="w_description"><span>Description :</span><textarea name="w_description" class="save-desc" placeholder="Dewscription of Award" maxlength="150"></textarea></label>'+
'<button name="save-winner" class="save-winner btn btn-info btn-sm style="float:left">Save Winner<br>' +
'<button name="cancel-winner" class="cancel-winner btn btn-warning btn-sm" style="float:right">Cancel winner</button>' +
'</div>';
//Drop a new Marker with the Winner Form
new_winner_marker(event.latLng, 'New Winner', WinnerForm, '', '', '', true, true, true, "static/assets/new_winner_icon.png");
显示这种形式的脚本是：
function new_winner_marker(MapPos, wName, wForm, wDesc, wMonth, wYear, InfoOpenDefault, DragAble, InfoOpenDefault, iconPath)
{
var marker = new google.maps.Marker({
position: MapPos,
map: map,
draggable:DragAble,
title: wName,
icon: iconPath
});
// Store the name info as a marker properties
marker.myname = wName;
winner_markers.push(marker);
// Content to be displayed in winner InfoWindows
var winnerContent = $(
'<div class="marker-inner-win"><span class="info-content">'+
'<h3 class="winner-heading">'+wName+'</h3><br>'+
wForm +
'</div></div>');
// Open Info window by default to add form
infowindow.setContent(winnerContent[0]);
保存按钮，当与形式应保存详细信息并保存标记压制。它将数据保存到数据库，但不是在地图上显示新标记，而是在浏览器中打开空白PHP。我也拥有它，所以如果字段名称留空，它会打开一个弹出窗口（引导模式），表示Name不能为空。但同样，这不会发生，它只是重定向到addwinners.php：
var saveBtn = winnerContent.find('button.save-winner')[0];
if(typeof saveBtn !== 'undefined') //continue only when save button is present
{
//add click listner to save marker button
google.maps.event.addDomListener(saveBtn, "click", function(event) {
var mReplace = winnerContent.find('span.info-content');
var wName = winnerContent.find('input.save-name')[0].value;
var wAdd = winnerContent.find('textarea.save-address')[0].value;
var wDesc = winnerContent.find('textarea.save-desc')[0].value;
var wMonth = winnerContent.find('select.save-month')[0].value;
var wYear = winnerContent.find('select.save-year')[0].value;
if(wName =='')
{
$("#myModal-save").modal('show,', 100);
}else{
save_winner(marker, wName, wAdd, wDesc, wMonth, wYear, mReplace); //call save marker function
}
，节省了数据使用Ajax的PHP脚本发送功能：
function save_winner(Marker, wName, wAdd, wDesc, wMonth, wYear, replaceWin)
{
//Save new marker using jQuery Ajax
var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
var myData = {name : wName, address : wAdd, about : wDesc, latlang : mLatLang, month : wMonth, year: wYear }; //post variables
$.ajax({
type: "POST",
url: "addwinner.php",
data: myData,
success:function(data){
replaceWin.html(data); //replace info window with new html
$("#winner-saved").slideDown();
Marker.setDraggable(false); //set marker to fixed
infowindow.setContent('Winner Added');
setTimeout(function() {infowindow.close();}, 3000); // Close info window after 3 seconds
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError); //throw any errors
}
});
}