Question

很抱歉，如果这有点冗长，但是我已经有一段时间了。所以基本上我都遵循了这两个教程 https://developers.google.com/maps/documentation/javascript/mysql-to-maps

https://developers.google.com/maps/documentation/javascript/info-windows-to-db

这些教程用于使用google maps api将google map标记加载到画布上，然后还保存有关用户创建的标记的信息。我正在尝试将这两个教程本质上结合起来，以允许我从数据库中加载google map标记（已完成），然后允许用户从单击标记时出现的信息窗口中提交有关它们的信息。。提交的信息将在标记的相应数据库行中更新，然后在单击标记时显示。那部分我遇到了麻烦。当用户在信息窗口中单击“提交”按钮时，似乎无法在数据库中更新标记的信息。我正在尝试更新用户从单击标记后显示在信息窗口中的下拉菜单中选择的任务的名称。

我将尝试仅发布与该问题相关的代码。任何帮助将不胜感激，谢谢

function initMap() {
var myCenter = new google.maps.LatLng(37.4419, -122.1419);
var mapCanvas = document.getElementById("map");
var mapOptions = {
    center: myCenter,
    zoom: 12
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var infoWindow = new google.maps.InfoWindow;

infowindow = new google.maps.InfoWindow({
    content: document.getElementById('form')
});

messagewindow = new google.maps.InfoWindow({
    content: document.getElementById('message')
});

function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click',
        function() {
            infoWindow.setContent(content);
            infoWindow.open(map, marker);
        });
}
//Loading in markers from DB via call.php
downloadUrl('call.php', function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function(markerElem) {
        var name = markerElem.getAttribute('name'); //name of marker          
        document.getElementById("name").innerHTML = name;
        var address = markerElem.getAttribute('address'); //address of marker
        var point = new google.maps.LatLng(
            parseFloat(markerElem.getAttribute('lat')),
            parseFloat(markerElem.getAttribute('lng')));
        var id = markerElem.getAttribute('id');
        var content = document.getElementById('form');
        var marker = new google.maps.Marker({
            map: map,
            position: point,
        });

        marker.addListener('click', function() {
            infowindow.setContent(content);
            infowindow.open(map, marker);
        });
    });
}); //end of downloadurl
} //end of initmap


 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, request.status);
    }
};

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

这是“提交”按钮的功能

function saveData() {
if (document.getElementById("questType").value == "quest1") { //if quest1 is selected upon submission
    alert("1");
    var questTitle = "1";
}
var name = escape(document.getElementById('name').value);
var url = "phpsqlinfo_updaterow.php?name=" + name + "&questTitle=" + questTitle;
downloadUrl(url, function(data, responseCode) {
    if (responseCode == 200 && data.length <= 1) {
        infowindow.close();
        messagewindow.open(map, marker);
    }
});
}

前2个代码块是我大部分的index.php

这是我的文件，我尝试使用用户提交的信息来更新数据库。我要更新的唯一一件事是任务标题。

<?php
require("phpsqlinfo_dbinfo.php");
include ("call.php");
$name = $_GET['name'];
$questTitle = $_GET['questTitle'];
$con=mysqli_connect ("localhost", $username, $password);
 $db_selected = mysqli_select_db( $con, $database);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysqli_error());
}
$query = (("UPDATE markers SET questTitle ='$questTitle' WHERE name = '$name'"));
$result = mysqli_query($con,$query);
 ?>

最后，这是我的call.php，它将xml文档输出到浏览器

<?php
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
include('connect.php');
$query = "SELECT * FROM markers WHERE 1";
$result = mysqli_query($con, $query);
if (!$result) {
  die('Invalid query: ' . mysqli_error($con));
}
// Iterate through the rows, adding XML nodes for each
while ($row = mysqli_fetch_assoc($result)){
    global $dom, $node, $parnode;
  // Add to XML document node
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("id",$row['id']);
 $newnode>setAttribute("questTitle",$row['questTitle']);
}
header("Content-type: text/xml");
echo $dom->saveXML();
?>

我对如何弄清楚如何标识哪个标记感到困惑。

Answer 1

您可以使用id属性来确定正在更新哪个标记。

1）创建一个名为clickedMarker的全局变量，它将包含对已打开并正在提交信息窗口的标记的引用。

var clickedMarker;

2）创建标记时，使用从数据库中检索到的ID设置标记的id属性。

var id = markerElem.getAttribute('id');

var marker = new google.maps.Marker({
    map: map,
    position: point,
    id: id
});

3）单击标记并打开信息窗口时，将标记设置为clickedMarker

marker.addListener('click', function() {
    infowindow.setContent(content);
    infowindow.open(map, marker);
    clickedMarker = marker;
});

4）在保存数据的同时，您可以从clickedMarker中检索ID，并将其作为附加查询参数发送到您的php文件中。

function saveData() {
    if (document.getElementById("questType").value == "quest1") { //if quest1 is selected upon submission
        alert("1");
        var questTitle = "1";
    }

    var id = clickedMarker.id;
    var name = escape(document.getElementById('name').value);
    var url = "phpsqlinfo_updaterow.php?name=" + name + "&questTitle=" + questTitle + "&id=" + id;
    downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
            infowindow.close();
            messagewindow.open(map, marker);
        }
    });
}

如何使用用户提交的信息更新Google Maps标记？

1 个答案: