2013-08-07 78 views
0

我想要你們的幫助。我編寫了允許用戶使用'click'函數創建標記(使用infowindow)的代碼,該函數將緯度/經度和其他信息保存到MySQL數據庫中,然後該數據庫將被調用以在地圖上顯示標記。當你點擊地圖時,它會創建一個標記,但不會將infowindow中的信息保存到數據庫中。我遵循谷歌地圖開發人員指南的指南,但仍然無法實現。我甚至三重檢查,以確保我的MySQL登錄細節工作正確,但仍然沒有。保存谷歌地圖標記onClick到數據庫

下面是代碼的地圖本身:

<!DOCTYPE html > 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Map Simple</title> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false"></script> 
<script type="text/javascript"> 
var marker; 
var infowindow; 

function initialize() { 
    var latlng = new google.maps.LatLng(37.4419, -122.1419); 
    var options = { 
    zoom: 13, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map-canvas"), options); 
    var html = "<table>" + 
      "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" + 
      "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" + 
      "<tr><td>Type:</td> <td><select id='type'>" + 
      "<option value='bar' SELECTED>bar</option>" + 
      "<option value='restaurant'>restaurant</option>" + 
      "</select> </td></tr>" + 
      "<tr><td></td><td><input type='button' value='Save & Close'  onclick='saveData()'/></td></tr>"; 
infowindow = new google.maps.InfoWindow({ 
content: html 
}); 

google.maps.event.addListener(map, "click", function(event) { 
    marker = new google.maps.Marker({ 
     position: event.latLng, 
     map: map 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
     infowindow.open(map, marker); 
    }); 
}); 
} 

function saveData() { 
    var name = escape(document.getElementById("name").value); 
    var address = escape(document.getElementById("address").value); 
    var type = document.getElementById("type").value; 
    var latlng = marker.getPosition(); 

    var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + 
      "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng(); 
    downloadUrl(url, function(data, responseCode) { 
    if (responseCode == 200 && data.length <= 1) { 
     infowindow.close(); 
     document.getElementById("message").innerHTML = "Location added."; 
    } 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request.responseText, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 
</script> 
</head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div id="map-canvas" style="width: 500px; height: 300px"></div> 
<div id="message"></div> 
</body> 

</html> 

這是應該的信息保存到數據庫(phpsqlinfo_addrow.php):

<?php 
require("phpsqlinfo_dbinfo.php"); 

// Gets data from URL parameters 
$name = $_GET['name']; 
$address = $_GET['address']; 
$lat = $_GET['lat']; 
$lng = $_GET['lng']; 
$type = $_GET['type']; 

// Opens a connection to a MySQL server 
$connection=mysql_connect ("localhost", $username, $password); 
if (!$connection) { 
    die('Not connected : ' . mysql_error()); 
} 

// Set the active MySQL database 
$db_selected = mysql_select_db($database, $connection); 
if (!$db_selected) { 
    die ('Can\'t use db : ' . mysql_error()); 
} 

// Insert new row with user data 
$query = sprintf("INSERT INTO markers " . 
    " (id, name, address, lat, lng, type) " . 
    " VALUES (NULL, '%s', '%s', '%s', '%s', '%s');", 
    mysql_real_escape_string($name), 
    mysql_real_escape_string($address), 
    mysql_real_escape_string($lat), 
    mysql_real_escape_string($lng), 
    mysql_real_escape_string($type)); 

$result = mysql_query($query); 

if (!$result) { 
    die('Invalid query: ' . mysql_error()); 
} 

?> 
+0

第一錯URL <腳本類型= 「文本/ JavaScript的」 SRC = 「http://maps.googleapis.com/maps/api/js?傳感器=假」> Shulod是<腳本類型=」 text/javascript「src =」http://maps.googleapis.com/maps/api/js?sensor=false「> –

+0

控制檯說什麼? – alkis

+0

@alkis它沒有給我任何錯誤消息,所以我不知道要修復什麼。 –

回答

1

您好我與我的項目有同樣的問題,以節省客戶的位置, 他們點擊那裏瀏覽器, 我所做的是我保存位置的緯度和lon gitude在兩個輸入框中顯示爲{您可以將它隱藏起來以便它不會看到}並提交提交按鈕並提交表單我已經提供了代碼,您還可以將其更改爲通過點擊提交表單並單擊提交表單您還可以存儲經度和緯度,如果你想同列

,你將需要插入你的關鍵

document.getElementById("yourform").submit(); 



<html> 
<head> 
    <style type="text/css"> 
       #map_canvas {height:300px;width:500px} 
    </style> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=""""youerapikeyhere""""&language=mr"></script> 
    <script type="text/javascript"> 
     var map; 
     var marker; 
     var markersArray = []; 
     function initialize() 
     { 
      var latlng = new google.maps.LatLng(18.5236, 73.8478); 
       var mapOptions = { 
       zoom: 13, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    google.maps.event.addListener(map, 'click', function(event) { 
    if (marker) { 
    marker.setMap(null); //code   
    } 
     //adding marker 
    document.getElementById('txtLat').value=event.latLng.lat(); 
    document.getElementById('txtLng').value=event.latLng.lng(); 
     marker= new google.maps.Marker({ 
     position: event.latLng, 
     map: map, 
     title: 'pune' 
    }); 
     //creting info window instance 
     var infowindow = new google.maps.InfoWindow({ 
     content: 'selected location' 
    }); 
     //adding pointer click event to open infowindow 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    }); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 

     <table cellpadding="0" cellspacing="0"> 
      <tr><td colspan=3><div id="map_canvas" style="background-color: #ffffff"></div></td></tr> 
      <tr><td><input type="text" id="txtLat" name="txtLat"style="width:150px"></td> 
       <td><input type="text" id="txtLng" name="txtLng"style="width:150px"></td></tr> 
     </table></form> 
</html>` 
0

儘量縮小的可能性,或者至少找到「在哪裏」出了問題。 ;意思,是從前端還是後端引起的問題!?

如果您使用Webkit UA(瀏覽器)或其變種,請使用其開發工具;如果使用Firefox,請安裝名爲FireBug的AddOn。在標記的點擊處理程序中,嘗試使用alert()或console.log()輸出座標,並查看結果是否被準確提取。接下來檢查AJAX調用是否應該傳遞給後端。

在您的PHP中,嘗試檢查傳入值(來自請求參數)。同時打開php.ini中的調試輸出,以便通過檢查stderr或系統日誌知道數據庫連接是否成功。

有很多事情可能會出錯。由於缺乏您提供的詳細信息很難說明,但我希望我的回覆能幫助您獲得良好的開端。

哦,順便說一句,我強烈建議你切換到PDO通過mysql_ ,mysql_將被棄用。