0

我需要你们的帮助。我编写了允许用户使用“单击”功能创建标记(带有信息窗口)的代码,该功能将把纬度/纬度和其他信息保存到 MySQL 数据库中,然后调用该数据库以在地图上显示标记。当您单击地图时,它会创建一个标记,但不会将信息窗口中的信息保存到数据库中。我遵循了谷歌地图开发者指南中的指南,但我仍然无法让它工作。我什至三次检查以确保我的 MySQL 登录详细信息正常工作,但仍然没有。

这是地图本身的代码:

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

?>
4

2 回答 2

1

嗨,我的项目有同样的问题来保存客户位置,他们点击那里的浏览器,我所做的是我在两个输入框中保存纬度和经度的位置,因为{你可以把它隐藏起来,所以它不会看到}给出提交按钮并提交表单我已经给出了代码你也可以通过点击提交表单将其更改为点击地图提交表单,如果你愿意,你还可以将纬度和经度存储在同一列中

你需要插入你的钥匙

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>`
于 2013-08-07T05:31:59.537 回答
0

尝试缩小可能性,或者至少找出错误的“哪里”;意思是,问题是由前端还是后端引起的!?

如果您使用 Webkit UA(浏览器)或其变体,请使用其开发者工具;如果使用 Firefox,请安装一个名为 FireBug 的插件。在标记的单击处理程序中,尝试使用 alert() 或 console.log() 输出坐标,并查看是否准确获取结果。接下来检查 AJAX 调用是否按应有的方式传递到后端。

在您的 PHP 中,尝试检查传入的值(来自请求参数)。还要打开 php.ini 中的调试输出,这样您就可以通过检查 stderr 或系统日志来了解数据库连接是否成功。

有很多事情可能会出错。由于您提供的细节不足,很难说,但我希望我的回复可以帮助您获得一个良好的开端。

哦,顺便说一句,我强烈建议您通过 mysql_ 切换到 PDO, mysql_将来会被弃用。

于 2013-08-17T17:46:12.250 回答