时间戳

首页 > 解决方案 > 如何使用用户提交的信息更新谷歌地图标记？

javascript - 如何使用用户提交的信息更新谷歌地图标记？

问题描述

对不起，如果这有点冗长，但我已经有一段时间了这个问题了。所以基本上我已经遵循了这两个教程 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 标记加载到画布上，然后还保存有关用户创建的标记的信息。我试图从本质上将这两个教程组合成一些东西，允许我从数据库中加载谷歌地图标记（我已经完成了），然后允许用户从单击标记时出现的信息窗口提交有关它们的信息. 提交的信息将在标记对应的数据库行中更新，然后在单击标记时显示。那部分我遇到了麻烦。当用户点击信息窗口中的提交按钮时，我似乎无法在数据库中更新标记的信息。我'

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

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

前两个代码块是我的大部分 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();
?>

我一直很困惑如何弄清楚如何判断哪个标记正在更新。

标签： javascriptmysqlgoogle-maps

解决方案

您可以使用该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);
        }
    });
}

推荐阅读