2016-11-13 79 views
-1

我正在使用Google地圖API來製作從數據庫檢索數據並在地圖上顯示相應標記的地圖。我按照以下說明做:https://developers.google.com/maps/articles/phpsqlajax_v3無法從PHP文件更改Google地圖標記的圖標

什麼我現在要做的就是創建一個頁面(稱爲add_marker.php)具有可拖動標記,以便用戶可以再加入新的標記基於數據庫在座標上。我想在本頁面上看到其他標記。我也在所有頁面中包含地圖代碼,所以我不希望它爲了這個頁面而急劇改變,所以我的方法如下:通過設置圖標,在除add_marker頁面之外的所有頁面中使可拖動標記不可見設置爲空字符串「」。現在問題是,我無法更改圖標的圖像,所以我可以在我希望它顯示的特定頁面中看到它。我在這裏搜索了很多stackoverflow,並找到了一些解決方案,但都沒有工作。 ,我得到的錯誤是:add_marker.php:9未捕獲參考錯誤:drag_marker沒有定義 (儘管我做了標記變量全局)

的代碼如下:

map_code。 PHP(這是我與鏈接的幫助下製成,幾乎是相同的,除了一些變量名稱的代碼頁。它包含在使用地圖文件)

任何幫助將不勝感激

<!DOCTYPE html> 
      <head> 
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
      <title>PHP/MySQL & Google Maps Example</title> 
      <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY" 
        type="text/javascript"></script> 
      <script type="text/javascript"> 

      var drag_marker; 
      function load() { 
       var map = new google.maps.Map(document.getElementById("map"), { 
       center: new google.maps.LatLng(37.511769, 22.371699), 
       zoom: 13, 
       mapTypeId: 'roadmap' 
       }); 
       var infoWindow = new google.maps.InfoWindow; 

       downloadUrl("phpsqlajax_genxml.php", function(data) { 
       var xml = data.responseXML; 
       var markers = xml.documentElement.getElementsByTagName("marker"); 
       for (var i = 0; i < markers.length; i++) { 
        var name = markers[i].getAttribute("name"); 
        var content = markers[i].getAttribute("content"); 
        var type = markers[i].getAttribute("type"); 
        var point = new google.maps.LatLng(
         parseFloat(markers[i].getAttribute("latitude")), 
         parseFloat(markers[i].getAttribute("longitude"))); 
        var content = markers[i].getAttribute("content"); 
        var icon = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
        var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' 
        }); 


        bindInfoWindow(marker, map, infoWindow, content, name); 
       } 
       }); 

       *var uluru = {lat: 37.52, lng: 22.37}; 
       drag_marker = new google.maps.Marker({ 
        icon: " ", 
        draggable: true, 
        position: uluru, 
        map: map 
       });* 

      } 

      function SelectElement(valueToSelect) 
      {  

      var element = document.getElementById("markerList"); 
      element.value = valueToSelect; 

      } 

      function bindInfoWindow(marker, map, infoWindow, html, name) { 
       google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.setContent(html); 

       infoWindow.open(map, marker); 

         infoWindow.setContent("<p>" + name + "<br />" + 
         html + "<br />"); 

       SelectElement(name); 

       }); 
      } 

      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 doNothing() {} 

      </script> 

      </head> 

      <body onload="load()"> 
      <div id="map" style="width: 99.5%; height: 40%"></div> 
      </body> 

     </html> 

add_marker.php:

<html> 
<head> 

    <title>My website</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script type="text/javascript"> 

     drag_marker.setIcon("http://maps.google.com/mapfiles/ms/icons/red-dot.png"); 


     </script>'; 
</head> 

<body> 
<div id="container"> 
    <div id="header"> 
    <h1><a href="Home.php"><img src="logo.png" align="center" alt="logo" style="width:300px;height:60px;"></a><a href="http://gav.uop.gr/"><img src="gavlab.png" align="right" alt="logo" style="width:200px;height:55px;"></a></h1> 

    </div> 

    <div id="content"> 
    <div id="nav"> 
    <h3>Πλοήγηση</h3> 
    <ul id="menu"> 
     <li><a href="Home.php">Homepage</a></li> 
     <li align="left"><a href="Map.php">Map</a></li> 
     <li><a href="index.php">Admin log-in</a></li> 
     <li><a href="About.php">info</a></li> 
     <li><a href="Contact.php">Contact</a></li> 
    </ul> 

    </div> 

    <div id="main"> 
    <h6 align="center">Map</h6> 

    <?php include("map_code.php"); ?> 

<div align="center" id="admin_menu"> 

<?php 
    error_reporting(E_ALL & ~E_NOTICE^E_DEPRECATED^E_WARNING); 
//http://www.clker.com/cliparts/e/3/F/I/0/A/google-maps-marker-for-residencelamontagne-hi.png 
//  icon:"http://maps.google.com/mapfiles/ms/icons/red-dot.png", 
    SESSION_START(); 

    if($_SESSION['username'] == "admin"||$_SESSION['username'] == "username"){ 
     echo '<p align="center" style="color:#8A2908"> Welcome <a href="logout.php"> εδώ.</a></p>'; 

    $con= mysql_connect('localhost','root',''); 
    mysql_set_charset('utf8'); 
    mysql_select_db('qr code'); 
    mysql_query("SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'", $con); 


    $sql="SELECT * FROM array1"; 

    $records=mysql_query($sql); 

    echo '<form id="main_form" name = "add_new_marker" action="marker_info.php" method="post">'; 


    '</form>'; 

    } 
     else echo '<p align="center" style="color:#8A2908">Please log in <a href="index.php"> εδώ.</a></p>';  

    ?> 

    </div> 
    </div> 
    </div> 
    <div id="footer"> 
    Copyright &copy; 2016 Name Here 
    </div> 
    </div> 
</body> 
</html> 
+0

是什麼?add_map.php它沒有加載任何谷歌地圖庫,或者任何JS,所以肯定「drag_marker」是未定義的,因爲它完全在另一個文件中定義,而且,在你設置drag_marker之前(在加載地圖後)drag_marker將是未定義的 – 2oppin

+0

您可能的意思是「add_marker.php」,它是讓您在地圖上添加標記的頁面。定義drag_marker的文件包含在主文件(add_map)中,所以我不明白爲什麼這不起作用。 – user131758

+0

噢,是的,對不起,add_marker,並錯過了包括,真的很困惑,他們都有完整的文檔結構(),不應該包含在partials,所以... JS在的add_mark首先運行,所以在那一刻沒有你的變量 – 2oppin

回答

0

您嘗試使用drag_marker變量它被定義之前(可能也被初始化之前,看一下在瀏覽器中呈現的HTML/JavaScript的)。

爲應對時機的問題,請嘗試:

google.maps.event.addDomListener(window, 'load', function() { 
drag_marker.setIcon("http://maps.google.com/mapfiles/ms/icons/red-dot.png"); 
}): 
+0

我在SESSION_START()之後移動了該代碼;部分,但現在它說Uncaught TypeError:不能讀取未定義的屬性'setIcon'。我是一個JavaScript的總新手...我應該在哪裏移動它? – user131758

+0

您的聲音現在在定義之後運行,但在初始化之前,您需要在加載函數運行後運行該代碼。 – geocodezip

+0

我試過在代碼中的各個點上運行它,但我總是得到相同的錯誤。加載函數何時運行?一旦我包含包含它的文件? – user131758