如何使用mysql在網站中添加谷歌地圖

我這樣做的第一次，我怎麼能在我的網站添加谷歌地圖？我已經做了AJAX請看這段代碼並給我回答如何使用mysql在網站中添加谷歌地圖

使用AJAX，Area來拋出數據庫的區域完全完成，並且「緯度」經緯度「很完美」，但我無法使用該緯度& JavaScript代碼中的經度。

，這是我的PHP文件中的代碼是：

<div class="col-lg-4"> 
    <select name="area_id" class="form-control" onchange="showUser(this.value)" id="area"> 
            <option value="">Select Area</option> 
           </select> 

</div> 
<script> 
    function showUser(str) { 
     if (str == "") { 
      document.getElementById("txtHint").innerHTML = ""; 
      return; 
     } else { 
      if (window.XMLHttpRequest) { 
       // code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp = new XMLHttpRequest(); 
      } else { 
       // code for IE6, IE5 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xmlhttp.onreadystatechange = function() { 
       if (this.readyState == 4 && this.status == 200) { 
        document.getElementById("txtHint").innerHTML = this.responseText; 
       } 
      }; 
      xmlhttp.open("GET", "getuser.php?q=" + str, true); 
      xmlhttp.send(); 
     } 
    } 
</script> 
</div> 
<div id="txtHint"><b>Person info will be listed here...</b></div>

這是getuser.php文件：此返回

<?php 
    include("config.php"); 
    ?> 
    <!DOCTYPE html> 
    <html> 

    <head> 
     <script src="https://maps.googleapis.com/maps/api/js?key=" My Map Key "&callback=initMap"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <style> 
      #txtHint { 
       height: 350px; 
      } 
     </style> 

    </head> 

    <body> 

     <?php 
     $q = intval($_GET['q']); 


     echo $sql = "SELECT * FROM area WHERE area_id='$q'"; 
       $qry = mysql_query($sql); 
       while($fetch = mysql_fetch_array($qry)) 
       { 

        $area_name=$fetch['area_name']; 
        //$city_name=$fetch['city_name']; 

        $address =$area_name; // Google HQ 

             $prepAddr = str_replace(' ','+',$address); 
             $geocode=file_get_contents('https://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false'); 
             $output= json_decode($geocode); 
             $area_latitude = $output->results[0]->geometry->location->lat; 

             $area_longitude = $output->results[0]->geometry->location->lng; 

             echo "<br><input type='text' name='area_latitude' id='area_latitude'value='".$area_latitude."'> <br>"; 
             echo "<input type='text' name='area_longitude' id='area_longitude' value='".$area_longitude."'>"; 
      ?> 

      <script type="text/javascript"> 
       var map; 
       var marker; 
       var area_latitude = $("#area_latitude").val(); 
       var area_longitude = $("#area_longitude").val(); 

       var myLatlng = new google.maps.LatLng(area_latitude, area_longitude); 
       var geocoder = new google.maps.Geocoder(); 
       var infowindow = new google.maps.InfoWindow(); 

       function initialize() { 
        var mapOptions = { 
         zoom: 18, 
         center: myLatlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 

        map = new google.maps.Map(document.getElementById("txtHint"), mapOptions); 

        marker = new google.maps.Marker({ 
         map: map, 
         position: myLatlng, 
         draggable: true 
        }); 


        geocoder.geocode({ 
         'latLng': myLatlng 
        }, function (results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          if (results[0]) { 
           $('#address').val(results[0].formatted_address); 
           $('#latitude').val(marker.getPosition().lat()); 
           $('#longitude').val(marker.getPosition().lng()); 
           infowindow.setContent(results[0].formatted_address); 
           infowindow.open(map, marker); 
          } 
         } 
        }); 


        google.maps.event.addListener(marker, 'dragend', function() { 

         geocoder.geocode({ 
          'latLng': marker.getPosition() 
         }, function (results, status) { 
          if (status == google.maps.GeocoderStatus.OK) { 
           if (results[0]) { 
            $('#address').val(results[0].formatted_address); 
            $('#latitude').val(marker.getPosition().lat()); 
            $('#longitude').val(marker.getPosition().lng()); 
            infowindow.setContent(results[0].formatted_address); 
            infowindow.open(map, marker); 
           } 
          } 
         }); 
        }); 

       } 

       google.maps.event.addDomListener(window, 'load', initialize); 
      </script> 

      <?php } 
     ?> 
    </body> 

    </html>

來源

2017-03-28 Dharmendra Kakde

您是否在控制檯中收到任何JS錯誤？有沒有地圖出現？ – duncan

從你加載地圖腳本的地方刪除這個：'「＆callback = initMap」'。你已經覆蓋了這個當你做'google.maps.event.addDomListener（窗口，'加載'，初始化）;' – duncan

我是刪除這個「＆callback = initMap」但不工作... –

的值可能串（"1.2345"），而不是浮標（1.2345 ），這是谷歌地圖預計的座標：

var area_latitude = $("#area_latitude").val(); 
var area_longitude = $("#area_longitude").val();

請嘗試：

var area_latitude = parseFloat($("#area_latitude").val()); 
var area_longitude = parseFloat($("#area_longitude").val());

來源

2017-03-28 10:27:49 duncan

先生它不工作，我每當我在腳本中設置它的經緯度時，它就不能工作，我將運行直接的getuser.php，那時它完全運行，但每當使用AJAX時，只有JavaScript不運行 –

你的AJAX請求在哪裏題？問題是因爲你在AJAX響應發生之前調用'initialize'。 – duncan

每當我將改變區域下拉時間onchange =「showUser（this.value）」方法調用和此方法代碼在上述第1個php文件 –

如何使用mysql在網站中添加谷歌地圖

回答

相關問題