文章/答案/技术大牛

发布

社区首页 >问答首页 >google-maps-api-3 -对我的位置进行地理定位并将其保存到MySQL数据库中

问google-maps-api-3 -对我的位置进行地理定位并将其保存到MySQL数据库中
EN

Stack Overflow用户

提问于 2012-09-18 04:41:21

回答 1查看 1.5K关注 0票数 1

我一直在开发URL：https://developers.google.com/maps/articles/phpsqlinfo_v3的实践，它的工作，但在另一个例子中，我需要相同的窗口超文本标记语言表单出现时，我点击在地图上显示的标记，当我使用代码来地理定位我的位置，并将该信息保存到MySQL数据库中。我正在使用下面的代码，但是HTML表单窗口没有显示保存地理位置数据。

这是网页中使用的代码: phpsqlinfo_add.html (类似于URL Sample的名称：https://developers.google.com/maps/articles/phpsqlinfo_v3)，其他互补网页: phpsqlinfo_addrow.php和phpsqlinfo_dbinfo.php与示例相似。

代码: 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>

html

google-maps-api-3

geolocation

infowindow

回答 1

Stack Overflow用户

发布于 2013-03-30 19:04:57

添加onclick事件侦听器和创建infowindow的代码从未被激活，而且您引用的是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);，如果这不是一个错误，并且initialize()做了一些不同的事情，那么组合使用init()和initialize()会更好。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12466787

复制

相似问题

问google-maps-api-3 -对我的位置进行地理定位并将其保存到MySQL数据库中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问google-maps-api-3 -对我的位置进行地理定位并将其保存到MySQL数据库中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问google-maps-api-3 -对我的位置进行地理定位并将其保存到MySQL数据库中
EN