Google Maps API v3：如何設置縮放級別並將中心映射到用戶提交的位置？

Question

我已經使用這個教程從谷歌構建Web應用程序，發現從用戶最近的商店輸入的位置：

http://code.google.com/apis/maps/articles/phpsqlsearch_v3.html

我有我的應用程序幾乎是工作，我想要的方式，在網頁加載時，地圖被加載，居中並設置爲縮放級別6，用戶用他們的位置填寫表單。

該應用程序然後從數據庫中拉出所有的商店信息，並用每個標記填充地圖。

縮放級別似乎降低，但我無法在任何地方的代碼中找到它。

我實際上想要提交的內容是放大縮小級別6，並將地圖居中置於用戶輸入位置的經緯度，並在最近的商店輸出信息，例如最接近的5.我想知道是否這裏的任何人都知道如何實現這個功能？

的index.php

<div> 
    <input type="text" id="addressInput" size="50"/> 
    <input type="hidden" id="radiusSelect" value="5"/> 
    <input type="button" onclick="searchLocations()" value="Search"/> 
</div> 
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div> 
<div id="map" style="width:100%; height:50%"></div> 



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<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(54.600939134593, -2.399894114594), 
    zoom: 6, 
    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 town = markerNodes[i].getAttribute("town"); 
    var postcode = markerNodes[i].getAttribute("postcode"); 
    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"))); 

    var id = markerNodes[i].getAttribute("id"); 
    var fname = markerNodes[i].getAttribute("fname"); 
    var link = '<a href="http://www.domain.co.uk/stores/' + fname + '-' + id + '.html" target="_blank" title="Store: ' + town + '">More info</a>'; 

    createOption(name, distance, i); 
    createMarker(latlng, name, address, town, postcode, link); 
    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, town, postcode, link) { 
    var html = "<b>" + town + "</b> <br/>" + address + "<br/>" + postcode + "<br/>" + link; 
    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> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     load(); 
    }); 
</script> 

phpsqlsearch_genxml.php

<?php 
$db_conn = mysql_connect('xxx.xxx.xx.xx', 'xxxxxxxx', 'xxxxxx') or die('error'); 
mysql_select_db('uk_db', $db_conn) or die(mysql_error()); 

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

if(!$_GET['zoom']) { 
    $_GET['zoom'] = 11; 
} 

// Start XML file, create parent node 
$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node); 


// Select all the rows in the markers table 
$query = 'SELECT address1, address2, address3, longitude, latitude, name, town, store_id, postcode, storenumber 
      FROM uk_store 
      WHERE isActive=1 '; 
if($_GET["region"] != '') { 
    $query .= ' AND region = "' . $_GET["region"] . '"'; 
} else { 
    $query .= ' AND region in("Scotland", "England", "Wales", "Northern Ireland") '; 
} 

// lets start to check what has been search on 
if($_GET['postcode'] != '') { 

    //lets make sure postcode only has numbers letter and spaces 
    $searchparams .= 'postcode=' . $_GET['postcode'] . '&amp;'; 
    $postcode = $_GET['postcode']; 
    $postcode = verifyInput($postcode); 
    $query .= " AND postcode = '" . $postcode . "'"; 

} 

if($_GET['town'] != '') { 
    // make sure town only has letters or spaces. 
    $searchparams .= 'town=' . $_GET['town'] . '&amp;'; 
    $town = $_GET['town']; 
    $town = verifyInput($town); 
    $query .= " AND town = '" . $town . "'"; 
} 

if($_GET['min_lat'] && $_GET['min_long'] && $_GET['max_lat'] && $_GET['max_long']) { 
    $query .= " AND latitude BETWEEN " . $_GET['min_lat'] . " AND " . $_GET['max_lat'] . " AND longitude BETWEEN " . $_GET['min_long'] . " AND " . $_GET['max_long'] ; 
    $mapsearch = 1; 
} 

if(!($_GET['postcodeLat'] && $_GET['postcodeLong'])) { 
    $query .= " ORDER BY Region, Town , Name "; 
} 

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

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

echo '<markers>'; 

if($_GET['postcodeLat'] && $_GET['postcodeLong']) 
{ 
    $count = 0; 

    // we need to sort the results by distance 
    while ($row = @mysql_fetch_array($result, MYSQL_ASSOC)) 
    { 
     $address = $row['address1'] . ' ' . $row['address2'] . ' ' . $row['address3']; 
     $distance = distance($_GET['postcodeLat'], $_GET['postcodeLong'], $row['latitude'], $row['longitude']); 
     $row['distance'] = number_format($distance, 2); 
     $row['fname'] = $row['town'] . '-' . $row['name']; 
     $row['fname'] = str_replace("'",'', $row['fname']); 
     $row['fname'] = ereg_replace(' ','-', $row['fname']); 
     $row['fname'] = ereg_replace('\/','-', $row['fname']); 
     $row['fname'] = ereg_replace('\(','', $row['fname']); 
     $row['fname'] = ereg_replace('\)','', $row['fname']); 
     $row['fname'] = strtolower($row['fname']); 
     //get distance and add to $row array 
     $results[$distance.$row['id']] = $row;   
    } 

    ksort($results); 

    foreach ($results as $key => $row) 
    { 
     // ADD TO XML DOCUMENT NODE 
     $address = $row['address1'] . ' ' . $row['address2'] . ' ' . $row['address3']; 
     echo '<marker '; 
     echo 'name="' . parseToXML($row['name']) . '" '; 
     echo 'fname="' . parseToXML($row['fname']) . '" '; 
     echo 'town="' . parseToXML($row['town']) . '" '; 
     echo 'lat="' . $row['latitude'] . '" '; 
     echo 'lng="' . $row['longitude'] . '" '; 
     echo 'id="' . $row['store_id'] . '" '; 
     echo 'address="' . $address . '" '; 
     echo 'distance="' . $row['distance'] . '" '; 
     echo 'postcode="' . $row['postcode'] . '" '; 
     echo 'storenumber="' . $row['storenumber'] . '" '; 
     echo 'address1="' . parsetoXml($row['address1']). '" '; 
     echo 'address2="' . parsetoXml($row['address2']). '" '; 
     echo 'address3="' . parsetoXml($row['address3']). '" '; 
     echo '/>'; 
    } 

} 
else 
{ 
    // Iterate through the rows, printing XML nodes for each 
    while ($row = @mysql_fetch_assoc($result)) 
    { 
     $address = $row['address1'] . ' ' . $row['address2'] . ' ' . $row['address3']; 
     $row['fname'] = $row['town'] . '-' . $row['name']; 
     $row['fname'] = ereg_replace(' ','-', $row['fname']); 
     $row['fname'] = ereg_replace('\/','-', $row['fname']); 
     $row['fname'] = ereg_replace('\(','', $row['fname']); 
     $row['fname'] = ereg_replace('\)','', $row['fname']); 

     // ADD TO XML DOCUMENT NODE 
     echo '<marker '; 
     echo 'name="' . parseToXML($row['name']) . '" '; 
     echo 'fname="' . strtolower(parseToXML($row['fname'])) . '" '; 
     echo 'town="' . parseToXML($row['town']) . '" '; 
     echo 'lat="' . $row['latitude'] . '" '; 
     echo 'lng="' . $row['longitude'] . '" '; 
     echo 'id="' . $row['store_id'] . '" '; 
     echo 'isSurg="' . $row['isLaserSurgery'] . '" '; 
     echo 'isCons="' . $row['isLaserConsult'] . '" '; 
     echo 'address="' . parsetoXml($address). '" '; 
     echo 'address1="' . parsetoXml($row['address1']). '" '; 
     echo 'address2="' . parsetoXml($row['address2']). '" '; 
     echo 'address3="' . parsetoXml($row['address3']). '" '; 
     echo 'postcode="' . $row['postcode'] . '" '; 
     echo 'storenumber="' . $row['storenumber'] . '" '; 
     echo '/>'; 
    } 
} 
// End XML file 
echo '</markers>'; 


// make sure the data is xml friendly 
function parseToXML($htmlStr) 
{ 
    $xmlStr=str_replace('<','&lt;',$htmlStr); 
    $xmlStr=str_replace('>','&gt;',$xmlStr); 
    $xmlStr=str_replace('"','&quot;',$xmlStr); 
    //$xmlStr=str_replace("'",'&#39;',$xmlStr); 
    $xmlStr=str_replace("&",'&amp;',$xmlStr); 
    return $xmlStr; 
} 

// calculate the distance in miles or kms between any two points 
function distance($lat1, $lon1, $lat2, $lon2, $unit = '') { 
    $theta = $lon1 - $lon2; 
    $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta)); 
    $dist = acos($dist); 
    $dist = rad2deg($dist); 
    $miles = $dist * 60 * 1.1515; 
    if($unit != '') 
    { 
     $unit = strtoupper($unit); 
    } 

if ($unit == "K") { 
    return ($miles * 1.609344); 
} else if ($unit == "N") { 
    return ($miles * 0.8684); 
} else { 
    return $miles; 
    } 
} 

function VerifyInput ($input, $forceInt = false) { 

if (is_numeric($input)) { 
    return $input; 
} elseif (!$forceInt) { 

    if (get_magic_quotes_gpc() && trim(ini_get("magic_quotes_sybase")) == "") { 
     $input = stripslashes($input); 
     $input = str_replace("'", "", $input); 
     $input = str_replace("`", "", $input); 
    } elseif (!get_magic_quotes_gpc()) { 
     $input = str_replace("'", "", $input); 
     $input = str_replace("`", "", $input); 
    } 
    return $input; 
} elseif ($forceInt) { 
    return 0; 
} 
} 

?> 

道歉，這是一個很大粘貼有，但我認爲最好包括一切，而不是風險的人不是能夠回答，因爲沒有足夠的細節。

UPDATE

我試圖將這段代碼到searchLocations功能，但它似乎不是tochange的行爲，無論如何也：

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); 
    /////////////// new code 
    var myOptions = { 
    zoom: 11, 
    center: address.geometry.location, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 
    //////////////// 

    } else { 
    alert(address + ' not found'); 
    } 
}); 
} 

Answer 1

既然你說過這將作爲一個Facebook應用程序，我有一個友好的建議。

既然您的代碼正在工作，您應該考慮將它封裝在自己的名稱空間中並實現module pattern。這樣做可以保證您的函數名稱，尤其是load（）不會在同一個FB頁面上碰撞或被其他應用程序覆蓋。

我創建了一個小的sample app here。你可以像這樣簡單：

if (!window.Carlin) { window.Carling = {}; } 
Carlin.Locator = function() { 

    var map,markers,infoWindow,locationSelect; 

    markers = []; 

    function load() { 
    } 

    function searchLocations() { 
    } 

    function clearLocations() { 
    } 

    //...etc 

    return { 
     init: load 
    } 
}(); 

$(document).ready(Carlin.Locator.init); 

Answer 2

找到我一直在尋找的方法文檔（驚喜，驚喜！）

只需在map.fitBounds(bounds);的searchLocationsNear函數中添加這兩行即可：

map.setZoom(11); 
    map.setCenter(center);