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
}
});
}