2012-09-17 67 views
1

我一直在開發URL的做法:https://developers.google.com/maps/articles/phpsqlinfo_v3和它的作品,但在另一個例子中,我需要出現在同一個窗口HTML表單時,我單擊顯示在地圖上時,我使用的代碼來地理定位我的位置,並把這些信息保存到MySQL數據庫的標記。我使用下面的代碼,但HTML表單窗口一點兒也不顯得保存地理位置數據。谷歌,地圖的API-3 - 以地理定位我的位置,並將其保存到一個MySQL數據庫

這是在網頁中使用的代碼:phpsqlinfo_add.html(網址樣品的相似名稱:https://developers.google.com/maps/articles/phpsqlinfo_v3)另一個互補的網頁:phpsqlinfo_addrow.php和phpsqlinfo_dbinfo.php類似於例子。作者

CODE:phpsqlinfo_add.html

<!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>:: DEMO ::</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

function detectBrowser() { 
var useragent = navigator.userAgent; 
var mapdiv = document.getElementById("map_canvas"); 

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) { 
mapdiv.style.width = '100%'; 
mapdiv.style.height = '100%'; 
} else { 
mapdiv.style.width = '600px'; 
mapdiv.style.height = '800px'; 
} 
} 

function init() { 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) { 
var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
var marcador = new google.maps.Marker(); 

var map = new google.maps.Map(document.getElementById('map_canvas'), { 
zoom: 16, 
center: pos, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

marcador.setPosition(pos); 
marcador.setMap(map) 

}, function() { 
alert("Su navegador debe soportar geolocalizacion"); 
}); 
} 
} 

google.maps.event.addDomListener(window, 'load', init); 

var map = new google.maps.Map(document.getElementById("map_canvas"), options); 

var html = "<table>" + 
      "<tr><td>Nombre:</td> <td><input type='text' id='name' value='Juan Gomez' readonly='readonly' /> </td> </tr>" + 
      "<tr><td>Direccion:</td> <td><input type='text' id='address'/></td> </tr>" + 
      "<tr><td>Tipo:</td> <td><select id='type'>" + 
      "<option value='Opcion 1' SELECTED>Opcion 1</option>" + 
      "<option value='Opcion 2'>Opcion 2</option>" + 
      "<option value='Opcion 3'>Opcion 3</option>" + 
      "</select> </td></tr>" + 
      "<tr><td></td><td><input type='button' value='Registrar' 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_canvas 
    }); 
    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 = "Ubicacion Registrada."; 
    } 
    }); 
} 

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> 

回答

0

的代碼添加onclick事件監聽器&創建信息窗口從未被激活,再加上你所引用的map_canvas提供DIV,而不是你的地圖。試試這個(見// * my comments *更改):

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

function detectBrowser() { 
var useragent = navigator.userAgent; 
var mapdiv = document.getElementById("map_canvas"); 

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) { 
mapdiv.style.width = '100%'; 
mapdiv.style.height = '100%'; 
} else { 
mapdiv.style.width = '600px'; 
mapdiv.style.height = '800px'; 
} 
} 

function init() { 
// * adjusted geolocation code for testing * 
var pos = new google.maps.LatLng(51.511,0.275); 
var marcador = new google.maps.Marker(); 
var map = new google.maps.Map(document.getElementById('map_canvas'), { 
zoom: 16, 
center: pos, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

marcador.setPosition(pos); 
marcador.setMap(map) 



// * infowindow code wasn't being activated, moved inside init() function * 
var html = "<table>" + 
     "<tr><td>Nombre:</td> <td><input type='text' id='name' value='Juan Gomez' readonly='readonly' /> </td> </tr>" + 
     "<tr><td>Direccion:</td> <td><input type='text' id='address'/></td> </tr>" + 
     "<tr><td>Tipo:</td> <td><select id='type'>" + 
     "<option value='Opcion 1' SELECTED>Opcion 1</option>" + 
     "<option value='Opcion 2'>Opcion 2</option>" + 
     "<option value='Opcion 3'>Opcion 3</option>" + 
     "</select> </td></tr>" + 
     "<tr><td></td><td><input type='button' value='Registrar' onclick='saveData()'/></td></tr>"; 

infowindow = new google.maps.InfoWindow({ 
content: html 
}); 

// * changed map: map_canvas to map: map * 
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); 
    }); 
}); 
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); 
    }); 
}); 
} 



google.maps.event.addDomListener(window, 'load', init); 

// * don't need to create map again * 
// var map = new google.maps.Map(document.getElementById("map_canvas"), options); 

// * rest of code should be fine... * 

另外要注意與<body onLoad="initialize()">google.maps.event.addDomListener(window, 'load', init);如果這不是一個錯誤,初始化()做不同的東西那麼這將是更好的init()結合並初始化( )。