2016-11-13 18 views
-1

GoogleマップAPIを使用してデータベースからデータを取得し、対応するマーカーを地図に表示するマップを作成しています。私は次の指示に従ってこれを行いました:https://developers.google.com/maps/articles/phpsqlajax_v3GoogleマップマーカーのアイコンをPHPファイルから変更できません

私がやろうとしているのは、ドラッグ可能なマーカーを持つページを作成して、新しいマーカーをデータベースに追加できるようにすることです(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何ですか?それは全く別のファイルで定義されているので、あなたがそれを設定するまで(地図がロードされた後)、drag_markerは未定義になるので、 "drag_marker"は未定義です。 – 2oppin

+0

マップ上にマーカーを追加できるページである「add_marker.php」を意味します。 drag_markerを定義するファイルはメインファイル(add_map)に含まれているので、なぜこれが機能しないのかわかりません。 – user131758

+0

ああ、はい、申し訳ありませんが、add_markerは、それらの両方が完全なドキュメント構造()を持っていると混乱しています。add_markののJS最初に実行されるので、その瞬間にあなたの変数はありません。 – 2oppin

答えて

0

あなたは(ブラウザでレンダリングされたHTML/JavaScriptのを見て、それが初期化される前にも、おそらくと)が定義される前drag_marker変数を使用しようとしています。 、タイミングの問題に対処しようとする

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

あなたのようなサウンドは、定義された後に実行されますが、初期化される前に、 'load'関数が実行された後にそのコードを実行する必要があります。 – geocodezip

+0

私はコードのさまざまな点でそれを実行しようとしましたが、私はいつも同じエラーが発生します。負荷機能はいつ実行されますか?一度私はそれを含むファイルを含める? – user131758

関連する問題