Fatal编程技术网
  • php/
  • Php 谷歌地图代码标记可以在firefox上使用，但不能在chrome或safari上使用

Php 谷歌地图代码标记可以在firefox上使用，但不能在chrome或safari上使用

php html google-chrome google-maps-api-3 safari

Php 谷歌地图代码标记可以在firefox上使用，但不能在chrome或safari上使用,php,html,google-chrome,google-maps-api-3,safari,Php,Html,Google Chrome,Google Maps Api 3,Safari,我正在创建一个用户地图系统，允许用户选择一个新位置或选择一个保存的位置（从sql文件）。我希望地图加载一个可拖动的标记，该标记可用于选择新位置，lat/lng填充表单上的相关字段。我还希望保存的位置填充一个下拉菜单，允许用户选择位置，lat/lng和名称将填充相关字段，可拖动标记将从地图中消失。当从下拉菜单中选择“选择新位置”时，“保存的位置”标记消失，可拖动标记应重新出现 这是我的密码。我承认我对这一点还不熟悉，并且经常使用谷歌地图开发人员，以及在线搜索，并且花了相当长的时间才达到这一点。 这

我正在创建一个用户地图系统，允许用户选择一个新位置或选择一个保存的位置（从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”，还有意外的标记< 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>


目击表格成员
var映射；
var标记=[]；
var markerNew；
var信息窗口；
var信息窗口；
变量位置选择；
var geocoder=new google.maps.geocoder（）；
var imageNew='binoculars3.png'；
var imageSave='star-3a.png'；
功能地理编码定位（pos）{
地理编码({
车床：位置
}，职能（回应）{
if（responses&&responses.length>0）{
控制台日志（响应）；
UpdateMarkeradAddress（响应[0]。地址\组件[0]。长\名称）；
}否则{
UpdateMarkeradAddress（'无法确定此位置的地址'）；
}
});
}
函数更新标记位置（latLng）{
var MapLat=latLng.lat（）；
var mapng=latLng.lng（）；
document.getElementById（'latitude'）。value=MapLat；
document.getElementById（'longitude'）。value=mapng；
}
函数更新标记地址（str）{
document.getElementById（'address'）。innerHTML=str；
打开（地图，markerNew）；
infowindow.setContent（地址）；
}
函数初始化（）{
var latLng=新的google.maps.latLng（10.6667，-61.3152）；
map=new google.maps.map（document.getElementById（“map”）{
中心：拉特林，
缩放：8，
mapTypeId:'混合'，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
泛控制：对，
全控选项：{
位置：google.maps.ControlPosition.TOP\u右
},
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.TOP_左
}
});
infoWindow=new google.maps.infoWindow（）；
新标记（latLng）；
infowindow=new google.maps.infowindow（）；
infowindow.setContent（地址）；
//添加保存的位置//设置下拉选项
locationSelect=document.getElementById（“locationSelect”）；
locationSelect.onchange=函数（）{
var markerNum=locationSelect.options[locationSelect.selectedIndex].value；
如果（markerNum！=“无”）{
google.maps.event.trigger（标记[markerNum]，'click'）；
}  
};
//在保存的位置读取
下载URL（'RetrieveSavedLoc.php'，函数（数据）{
var xml=parseXml（数据）；
var markerNodes=xml.documentElement.getElementsByTagName（“markerSave”）；
var bounds=new google.maps.LatLngBounds（）；
对于（变量i=0；i<?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();
?>