Question

我正在创建一个用户地图系统，允许用户选择新位置或选择保存的位置（来自sql文件）。我希望地图加载一个可拖动的标记，可用于选择一个新的位置，lat / lng填充表单上的相关字段。我还希望保存的位置填充下拉菜单，允许用户选择位置，然后lat / lng和名称将填充相关字段，并且可拖动标记将从地图中消失。从下拉菜单中选择“选择新位置”后，“已保存位置”标记将消失，并且可重新显示可拖动标记。

这是我的代码。我承认我是新手，并且经常使用谷歌地图开发人员，以及在线搜索并花了很长时间才达到这一点。这段代码完全符合我想要的Firefox和IE，但不适用于Chrome或Safari。在Chrome中，保存的位置会显示在下拉菜单中，但是当我在加载保存的位置后点击“选择新位置”时，可拖动的标记不会重新出现。在Safari中，甚至未加载保存的位置。我将不胜感激任何有关如何使用可能导致此问题的代码修复错误的建议。我已经尝试在Chrome（31.0.1650.57）和Safari（5.1.7 for windows）中进行调试，我得到了无法读取未定义的main.js属性'_ e3 '以及Unexpected token＆lt; error404.000webhost.com/（我在000webhost上托管该网站）。

这是我的HTML代码：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>Sightings Form Member</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="js/main.js"></script>
    <script src="js/ajax.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

    var map;
    var markers = [];
    var markerNew;
    var infoWindow;
    var infowindow;
    var locationSelect;
    var geocoder = new google.maps.Geocoder();
    var imageNew = 'binoculars3.png';
    var imageSave = 'star-3a.png';

    function geocodePosition(pos) {
        geocoder.geocode({
        latLng: pos
        }, function(responses) {
            if (responses && responses.length > 0) {
                console.log(responses);
                updateMarkerAddress(responses[0].address_components[0].long_name);
                } else {
                updateMarkerAddress('Cannot determine address at this location.');
                }
            });
    }

    function updateMarkerPosition(latLng) {
        var MapLat =latLng.lat();
        var MapLng =latLng.lng();  
            document.getElementById('latitude').value = MapLat;
            document.getElementById('longitude').value = MapLng;
    }

    function updateMarkerAddress(str) {
        document.getElementById('address').innerHTML = str;
          infowindow.open(map, markerNew);
          infowindow.setContent(address);
    }

    function initialize() {
        var latLng = new google.maps.LatLng(10.6667, -61.3152);
            map = new google.maps.Map(document.getElementById("map"), {
            center: latLng,
            zoom: 8,
            mapTypeId: 'hybrid',
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                panControl: true,
                panControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT
            },
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.TOP_left
                }
   });

   infoWindow = new google.maps.InfoWindow();

   NewMarker(latLng);
   infowindow = new google.maps.InfoWindow();
   infowindow.setContent(address);

    // Adds saved locations //Set up dropdown options 
    locationSelect = document.getElementById("locationSelect");
    locationSelect.onchange = function() {
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
        if (markerNum != "none"){
            google.maps.event.trigger(markers[markerNum], 'click');
            }  
    };

   //Read in saved locations
    downloadUrl('RetrieveSavedLoc.php', function(data) {
       var xml =   parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("markerSave");
       var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markerNodes.length; i++) {
                var name = markerNodes[i].getAttribute("loc_name");
                var address = markerNodes[i].getAttribute("dayyear");
                var savedlatlng = new google.maps.LatLng(
                    parseFloat(markerNodes[i].getAttribute("lat")),
                    parseFloat(markerNodes[i].getAttribute("lng")));
                var MapLat = markerNodes[i].getAttribute("lat");
                var MapLon = markerNodes[i].getAttribute("lng");

        createOption(name, i);
        createMarker(savedlatlng, name,MapLat,MapLon);
        bounds.extend(savedlatlng);
       }
        locationSelect.style.visibility = "visible";
        locationSelect.onchange = function() {
            var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
                google.maps.event.trigger(markers[markerNum], 'click');
        };
        });
    }
///Set up new marker
    function NewMarker(latLng,address) {
            markerNew = new google.maps.Marker({
                position: latLng,
                icon: imageNew,
                map: map,
                draggable: true,
                crossOnDrag:false
    });

  google.maps.event.addListener(markerNew, 'drag', function() {
     updateMarkerPosition(markerNew.getPosition());
     document.getElementById('locname').value = '';
  });

  google.maps.event.addListener(markerNew, 'dragend', function() {
     geocodePosition(markerNew.getPosition());
        var newlatLng = markerNew.getPosition(); // returns LatLng object
        map.setCenter(newlatLng);
     });
  }
  //Saved location marker
    function createMarker(savedlatlng, name,MapLat,MapLon) {
        var html = "<b>" + name + "</b>";
        var marker = new google.maps.Marker({
            map: map,
            icon: imageSave,
            position: savedlatlng,
            visible: false
      });

      google.maps.event.addListener(marker, 'click', function() {
            infowindow.close(); //Close MarkerNew infowindow
            markerNew.setVisible(false);//Close MarkerNew
            marker.setVisible(true);
            setAllMap(map); //Allows saved markers to be put back on map
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
            document.getElementById('latitude').value = MapLat;
            document.getElementById('longitude').value = MapLon;
            document.getElementById('locname').value = name;
      });
      markers.push(marker);
    }
    //Reads saved locations into dropdown menu
     function createOption(name, num) {
        var option = document.createElement("option");
            option.value = num;
            option.innerHTML = name;
            locationSelect.appendChild(option);
    }

    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 parseXml(str) {
      if (window.ActiveXObject) {
            var doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.loadXML(str);
            return doc;
            } else if (window.DOMParser) {
            return (new DOMParser).parseFromString(str, 'text/xml');
        }
    }

    function doNothing() {}

// Sets the map on all markers in the array.
    function setAllMap(map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
    }
    }
// Removes the markers from the map, but keeps them in the array.
    function clearMarkers() {
        setAllMap(null);
        markerNew.setVisible(true);
    }
// Sets the map on all markers in the array.
    function setNewMap(map) {
        for (var i = 0; i < markerNew.length; i++) {
            markerNew[i].setMap(map);
    }
    }

// Removes the markers from the map, but keeps them in the array.
function clearMarkerNew() {
    google.maps.event.addListener(map, "click", function () {
        markerNew.setMap(null);
        alert("Marker has been removed from map, about to restore it");
            });
    }
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
 <body>
<body id = "main_body">
       </div>
   <div id="mainouter"> 
    <div class = "form description">
    <form action="reviewMember.php" method="post">

        <label style="font-size:1.4em;font-color:black;" class="description" for="location" >Where did you see it?* </label>
        <label class="description" for="location"></label>
            <div><select id="locationSelect" name="locationSelect" style="width:400px">
        <option value="loc_new" onclick="clearMarkers();">Select a new location</option>
        </select></div>

        <div id="map" style="height: 300px;width: 400px;margin-right: 0.9em;float:left;"></div>

    </form>
    </div>
    </body>
</html>

和php：

<?php  
require("connectMap.php"); 
// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 

// Opens a connection to a MySQL server
$con=mysqli_connect ($server, $user, $pass,$db);
if (!$con) {  die('Not connected : ' . mysqli_error($con));} 

session_start();

if(!isSet($_SESSION["email"],$_SESSION['uid'])) {
    // Redirect user to login page
    header("Location: login_final.php");
    exit();
}else {
    $userEmail = $_SESSION["email"];
 }

    // Select the member ID from the users table - to search for the id in the database
    $sql = "SELECT * FROM users WHERE email ='$userEmail' LIMIT 1";
    $user_query = mysqli_query($con, $sql);
    // Now make sure that user exists in the table
    $numrows = mysqli_num_rows($user_query);
    if($numrows < 1){
    echo "That user does not exist or is not yet activated, press back";
    exit(); 
    }

    // Fetch the user row from the query above
    while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC)) {
    $userID = $row["ID"];
    }

    // Select the member from the database table - this is to find the name of the user to input into the form and save into form database
    $query = "SELECT * FROM locations WHERE userID ='$userID' ";
    $result = mysqli_query($con,$query);
    $dayyear = "";

    if (!$result) {  
    die('Invalid query: ' . mysqli_error($con));
    } 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){  
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("markerSave");  
  $newnode = $parnode->appendChild($node);   
  $newnode->setAttribute("loc_name",$row['locname']);
  $newnode->setAttribute("lat", $row['lat']);  
  $newnode->setAttribute("lng", $row['lng']);  
} 

echo $dom->saveXML();
?>

谷歌地图代码标记代码适用于Firefox，但不适用于chrome或safari

0 个答案: