2012-02-09 308 views
1

我對Google maps API v3相當陌生。我按照教程介紹瞭如何創建商店定位器,並且一切都很順利。然而,我對phpMyAdmin並不熟悉,我想不出我能做什麼,而不是搜索商店,它搜索一些商店庫存,並將庫存中的商品退還給商店。谷歌地圖商店定位器

我的代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

    <title>Google Maps AJAX + mySQL/PHP Example</title> 

    <script src="http://maps.google.com/maps/api/js?sensor=false" 

      type="text/javascript"></script> 

    <script type="text/javascript"> 

    //<![CDATA[ 

    var map; 

    var markers = []; 

    var infoWindow; 

    var locationSelect; 



    function load() { 

     map = new google.maps.Map(document.getElementById("map"), { 

     center: new google.maps.LatLng(40, -100), 

     zoom: 4, 

     mapTypeId: 'roadmap', 

     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} 

     }); 

     infoWindow = new google.maps.InfoWindow(); 



     locationSelect = document.getElementById("locationSelect"); 

     locationSelect.onchange = function() { 

     var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 

     if (markerNum != "none"){ 

      google.maps.event.trigger(markers[markerNum], 'click'); 

     } 

     }; 

    } 



    function searchLocations() { 

    var address = document.getElementById("addressInput").value; 

    var geocoder = new google.maps.Geocoder(); 

    geocoder.geocode({address: address}, function(results, status) { 

     if (status == google.maps.GeocoderStatus.OK) { 

     searchLocationsNear(results[0].geometry.location); 

     } else { 

     alert(address + ' not found'); 

     } 

    }); 

    } 



    function clearLocations() { 

    infoWindow.close(); 

    for (var i = 0; i < markers.length; i++) { 

     markers[i].setMap(null); 

    } 

    markers.length = 0; 



    locationSelect.innerHTML = ""; 

    var option = document.createElement("option"); 

    option.value = "none"; 

    option.innerHTML = "See all results:"; 

    locationSelect.appendChild(option); 

    } 



    function searchLocationsNear(center) { 

    clearLocations(); 



    var radius = document.getElementById('radiusSelect').value; 

    var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; 

    downloadUrl(searchUrl, function(data) { 

     var xml = parseXml(data); 

     var markerNodes = xml.documentElement.getElementsByTagName("marker"); 

     var bounds = new google.maps.LatLngBounds(); 

     for (var i = 0; i < markerNodes.length; i++) { 

     var name = markerNodes[i].getAttribute("name"); 

     var address = markerNodes[i].getAttribute("address"); 

     var distance = parseFloat(markerNodes[i].getAttribute("distance")); 

     var latlng = new google.maps.LatLng(

       parseFloat(markerNodes[i].getAttribute("lat")), 

       parseFloat(markerNodes[i].getAttribute("lng"))); 



     createOption(name, distance, i); 

     createMarker(latlng, name, address); 

     bounds.extend(latlng); 

     } 

     map.fitBounds(bounds); 

     locationSelect.style.visibility = "visible"; 

     locationSelect.onchange = function() { 

     var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 

     google.maps.event.trigger(markers[markerNum], 'click'); 

     }; 

     }); 

    } 



    function createMarker(latlng, name, address) { 

     var html = "<b>" + name + "</b> <br/>" + address; 

     var marker = new google.maps.Marker({ 

     map: map, 

     position: latlng 

     }); 

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

     infoWindow.setContent(html); 

     infoWindow.open(map, marker); 

     }); 

     markers.push(marker); 

    } 



    function createOption(name, distance, num) { 

     var option = document.createElement("option"); 

     option.value = num; 

     option.innerHTML = name + "(" + distance.toFixed(1) + ")"; 

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



    //]]> 

    </script> 

    </head> 



    <body style="margin:0px; padding:0px;" onload="load()"> 

    <div> 

    <input type="text" id="addressInput" size="10"/> 

    <select id="radiusSelect"> 

     <option value="3" selected>3mi</option> 

     <option value="5">5mi</option> 

     <option value="10">10mi</option> 

     <option value="25">25mi</option> 

    </select> 



    <input type="button" onclick="searchLocations();" value="Search"/> 



    </div> 

    <div><select id="locationSelect" style="width:500;visibility:hidden"></select></div> 

    <div id="map" style="width: 500; height: 500"></div> 

    </body> 

</html> 

而且

<?php 
require("phpsqlsearch_dbinfo.php"); 

// Get parameters from URL 
$center_lat = $_GET["lat"]; 
$center_lng = $_GET["lng"]; 
$radius = $_GET["radius"]; 

// 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 
$connection=mysql_connect ('localhost', $username, $password); 
if (!$connection) { 
    die("Not connected : " . mysql_error()); 
} 

// Set the active mySQL database 
$db_selected = mysql_select_db($database, $connection); 
if (!$db_selected) { 
    die ("Can\'t use db : " . mysql_error()); 
} 

// Search the rows in the markers table 
$query = sprintf("SELECT address, name, lat, lng, (3959 * acos(cos(radians('%s')) * cos(radians(lat)) * cos(radians(lng) - radians('%s')) + sin(radians('%s')) * sin(radians(lat)))) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 3", 
    mysql_real_escape_string($center_lat), 
    mysql_real_escape_string($center_lng), 
    mysql_real_escape_string($center_lat), 
    mysql_real_escape_string($radius)); 
$result = mysql_query($query); 

if (!$result) { 
    die("Invalid query: " . mysql_error()); 
} 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each 
while ($row = @mysql_fetch_assoc($result)){ 
    $node = $dom->createElement("marker"); 
    $newnode = $parnode->appendChild($node); 
    $newnode->setAttribute("name", $row['name']); 
    $newnode->setAttribute("address", $row['address']); 
    $newnode->setAttribute("lat", $row['lat']); 
    $newnode->setAttribute("lng", $row['lng']); 
    $newnode->setAttribute("distance", $row['distance']); 
} 

echo $dom->saveXML(); 
?> 
+0

你能告訴我們什麼該字段的名稱是否包含庫存信息?或者,如果您可以向我們展示最適合您的數據庫架構。 – andresf 2012-02-09 01:26:58

+0

的姓名,地址,緯度,經度 http://gmaps-samples-v3.googlecode.com/svn/trunk/articles/phpsqlsearch/phpsqlsearch_data.csv – 2012-02-09 01:30:41

+0

我還沒有想出如何各店鋪鏈接到庫存 – 2012-02-09 01:32:11

回答

0

你會使用你的查詢中使用聯接(雖然視圖可能更好)查詢對商店庫存。所以,你會檢查,看看庫存> 0。您的查詢將包括像FROM markers WHERE ([您加入查詢]and[盤點場]> 0) AND HAVING distance ...