谷歌地圖API - 想要顯示地圖上的郵政編碼 - JS/PHP

-1

我目前正在研究谷歌地圖模塊，它從數據庫（MySql）獲取郵編並將其顯示在屏幕上。它目前正在使用HTML表單提交按鈕，但我希望將其刪除。任何人都可以看一看，並告訴我我需要採取哪些措施來實現這一目標。谷歌地圖API - 想要顯示地圖上的郵政編碼 - JS/PHP

感謝

<?php 

session_start(); 
if (!isset($_SESSION['username'])){ 
    echo "You aren't logged in, please do so below<br>"; 
    include('loginform.php'); 
    exit(); 
} 

?> 
<!doctype html><head> 
    <title>front</title> 
    <style> 
p { 
    color: white; 
} 
     #map 
     { 
      height:400px; 
      width:400px; 
      display:block; 
     } 
.element { 
    position: relative; 
    float: left; 
    z-index: 0; 
    width: 100%; 
    height: 51px; 
    background-color: rgba(0, 0, 0, 0.12); 
} 
.text { 
    color: white; 
} 
.image { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    width: 125px; 
    height: auto; 
    margin: 0 auto; 
    overflow: hidden; 
} 
.button { 
color: white; 
background-color: rgba(0, 0, 0, 0.3); 
background-blend-mode: screen; 
padding: 10px; 
border-radius: 5px; 
text-align: center; 
     } 
     .content { 
      position: relative; 
      top: 25px; 
      width: 320px; 
      margin: auto; 
      font-family: Arial, Helvetica, sans-serif; 
     } 
</style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdfR_iH3dKB3ghSFhyDvfTeoA53c6PPGg"></script> 
     <script type="text/javascript"> 

      function getPosition(callback) { 
      var geocoder = new google.maps.Geocoder(); 
      var postcode = document.getElementById("postcode").value; 

      geocoder.geocode({'address': postcode}, function(results, status) 
      { 
       if (status == google.maps.GeocoderStatus.OK) 
       { 
       callback({ 
        latt: results[0].geometry.location.lat(), 
        long: results[0].geometry.location.lng() 
       }); 
       } 
      }); 
      } 

      function setup_map(latitude, longitude) { 
      var _position = { lat: latitude, lng: longitude}; 

      var mapOptions = { 
       zoom: 16, 
       center: _position 
      } 

      var map = new google.maps.Map(document.getElementById('map'), mapOptions); 

      var marker = new google.maps.Marker({ 
       position: mapOptions.center, 
       map: map 
      }); 
      } 

      window.onload = function() { 
      setup_map(51.5073509, -0.12775829999998223); 

      document.getElementById("form").onsubmit = function() { 
       getPosition(function(position){ 

       var text = document.getElementById("text") 
       text.innerHTML = "Marker position: { Longitude: "+position.long+ ", Latitude:"+position.latt+" }"; 

       setup_map(position.latt, position.long); 
       }); 
      } 
      } 
     </script> 
    </head> 

<?php 
include('header.html'); 
    $username = $_SESSION['username']; 
    $con = *** 
    if (!isset($con)) { 
     echo "Connection to Aurora System failed."; 
    } 

if(isset($_POST['shop_id'])){ 
    $shopid = $_POST['shop_id']; 
} else { 
    die('Shop not selected'); 
} 

?> 
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <title>shopoptions</title> 

<body> 
    <div class="content" align="center"> 
    <p class="text text-3"><?php $query2 = "SELECT shopname, contactname, streetaddress, streetaddress2, city, county, email, phonenumber, postcode FROM shops WHERE shop_id = '$shopid'"; 
    $result2 = mysqli_query($con, $query2); 
    while ($row2 = mysqli_fetch_array($result2)) { 
     echo $row2['shopname'] . '<br>' . $row2['contactname'] . '<br>' . $row2['streetaddress'] . '<br>' . $row2['streetaddress2'] . '<br>' . $row2['city'] . '<br>' . $row2['county'] . '<br>' . $row2['postcode'] . '<br><br>' . $row2['email'] . '<br>' . $row2['phonenumber'] . '<br><br>'; 
     $postcode = $row2['postcode']; 
    } ?></p><br> 
      <form action="javascript:void(0)" id="form"> 
     <input type="hidden" id="postcode" value="<?php echo $postcode; ?>"> 
     <input type="submit" value="Show me"/> 
     </form> 
     <div id="map"></div> 
     <div id="text"></div> 


    <br> 

    <form action="orderselect.php" method="POST"> 
    <input type="hidden" value="<?php echo $shopid; ?>" name="shop_id"> 
    <button class="button">View Orders</button> 
    </form><br> 
    <form action="FUCKORDER.PHP" method="post"> 
    <input type="hidden" value="<?php echo $shopid; ?>" name="shop_id"> 
    <button class="button">Create Report</button> 
    </form><br> 
    <form action="competitors.php" method="GET"> 
    <input type="hidden" value="<?php echo $shopid; ?>" name="shop_id"> 
    <button class="button">POS/Competition</button> 
    </form><br> 

    <a href="front.php"><button class="button">Go Back</button></a> 
    </div> 
</body> 
</html>

來源

2017-03-03 Lucas Craven

嗯....做你想做的事，而不是什麼..？ – PhpDude

Doh！如果我說哈哈，會有所幫助。我希望能夠從mysql數據庫中獲取郵政編碼，然後用它來自動顯示它在地圖上的位置 –

你必須採取郵政編碼以及國家名稱，因此這會爲許多國家的工作。如果您只想使用郵政編碼，則必須限制在指定國家內進行搜索。

Fiddle演示

想法是讓那就是後置代號+國家從MySQL數據庫中的數據，並把它的隱藏字段值

<input id="pin_country" type="hidden" value="560038, india">

然後調用JavaScript函數window.onload = codeAddress()

這將顯示在地圖上的位置

所以代碼

var geocoder; 
var map; 
var marker; 
codeAddress = function() { 
    geocoder = new google.maps.Geocoder(); 

    var address = document.getElementById('pin_country').value; 
    geocoder.geocode({ 
    'address': address 
    }, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map = new google.maps.Map(document.getElementById('mapCanvas'), { 
     zoom: 16, 
     streetViewControl: false, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
      mapTypeIds: [google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP] 
     }, 
     center: results[0].geometry.location, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     map.setCenter(results[0].geometry.location); 
     marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location, 
     draggable: false, 
     title: 'My Title' 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

window.onload=codeAddress()

如果希望只使用郵政編碼，然後上面的代碼被修改

<input id="pin_country" type="hidden" value="560038">

geocoder.geocode({ 
    'address': address, 
    componentRestrictions: { /*this adds restict to specific country*/ 
      country: 'IN', 
      } 
    }, function(results, status) {...})

來源

2017-03-03 18:38:49

谷歌地圖API - 想要顯示地圖上的郵政編碼 - JS/PHP

回答

相關問題