谷歌地图，PHP

我是相当新的PHP，并没有想出我将如何执行某项任务。谷歌地图，PHP

我的代码有用户输入他们的地址，然后选择半径为搜索，之后他们搜索一个地图产生，显示3个最接近的位置到他们的地址。

我想要这样做，当用户点击地图上的标记时，它会为该项目单击生成一个页面。说你点击 “商店名称”。你能帮我理解这可能是怎么做到的吗？谢谢。

 <?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(); 
?>

和

<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>

来源

2012-02-13 Eric Goncalves

你是什么意思“它产生于该项目页面点击”是什么意思？你想在后台生成一个页面异步，或只是打开一个新的网址页面？ – 2012-02-13 10:43:36

用新的URL打开一个页面 – 2012-02-13 18:22:06

在JS中存在一个全局变量位置。通过更改href属性，您可以强制浏览器打开另一个URL。 docu：http://www.w3schools.com/jsref/obj_location.asp

如果您需要关于点击标记的信息，您可以将此信息放入闭包范围，稍后在点击标记时重用它。在运行时调用create-function，并通过click事件调用返回的匿名函数。

伪代码：

function createCLickCallback(marker) { 
    return function() { 
     var position = marker.getPosition(); 
     location.href = "locationInfo.php?lat=" + position.lat() + "&lng=" + position.lng(); 
    }; 
} 

google.maps.event.addListener(marker, 'click', createCLickCallback(marker));

来源

2012-02-13 22:56:31

在你的JS功能 “createMarker”

要添加监听器标记点击事件： google.maps.event.addListener（标记， '点击'，函数（）{ ... }）; 您应该在事件回调函数中添加您的“页面生成”代码（无论是打开新页面还是更新当前页面的某个部分）。在你当前的代码中，google infowindow将在你的标记上打开。

来源

2012-02-13 14:13:28 den380

谷歌地图，PHP

回答

相关问题