Как я могу обновить маркер карт Google с информацией, предоставленной пользователем? - PullRequest
0 голосов
/ 21 сентября 2018

Извините, если это довольно долго, но у меня уже была эта проблема.Итак, в основном, я следовал обоим этим учебникам https://developers.google.com/maps/documentation/javascript/mysql-to-maps

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

Эти учебники предназначены для загрузки маркеров карт Google на холст с помощью API карт Google, а затем также для сохранения информации о созданныхмаркеры от пользователя.Я пытаюсь по существу объединить эти 2 учебника во что-то, что позволяет мне загружать маркеры карты Google из базы данных (что я и сделал), а затем позволяет пользователю отправлять информацию о них из информационного окна, которое появляется при нажатии на маркер,Представленная информация должна быть обновлена ​​в соответствующей строке базы данных маркера, а затем отображена при щелчке маркера.В этой части у меня проблемы.Я не могу получить информацию маркера в базе данных для обновления, когда пользователь нажимает кнопку отправки в информационном окне.Я пытаюсь обновить название квеста, который пользователь выбирает из выпадающего меню, которое появляется в информационном окне при нажатии на маркер.

Я постараюсь опубликовать только тот код, который имеет отношение к проблеме.Любая помощь будет оценена, спасибо

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();
?>

Меня сбивает с толку, как понять, как определить, какой маркеробновляется.

1 Ответ

0 голосов
/ 21 сентября 2018

Вы можете использовать свойство id, чтобы выяснить, какой маркер обновляется.

1) Создайте глобальную переменную с именем clickedMarker, которая будет содержать ссылку на маркер, открытое и отправляемое информационное окно.

var clickedMarker;

2) При создании маркера установитеСвойство 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 и отправить его в свой 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);
        }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...