Google在特定区域中从数据库中映射api搜索标记 [英] Google map api search markers from database in specifc area
问题描述
我设置了Google Map API，可以从MySQL数据库和显示标记中加载数据。我面临的问题是无论我在搜索位置字段中输入什么内容，所有标记都会立即显示.............. 我只想显示搜索区域和标记在那个地区。它不应该一次显示所有标记，而只能显示搜索区域中的标记。
我的意思是我想将地图放大到搜索区域。目前，如果我只有一个标记地图放大显示，但如果我有很多标记，地图会缩小以显示所有标记。这里是我正在处理的地图http://funfeat.com/clients/gmap/gmap3.html现在，我已经将标记设置得很远，地图仍然通过缩小来显示所有标记。
gmap.php是从mysql数据库提供xml结果的文件。和下面的代码是我用来显示地图
< html xmlns =http：//www.w3。组织/ 1999 / XHTML>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< title> Google Maps AJAX + mySQL / PHP Example< / title>
< script src =http://maps.googleapis.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：10，
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'）;
}
};
函数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'）;
}
}）;
}
函数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 =查看所有结果：;
locationSelect.appendChild（option）;
函数searchLocations近（中）{
clearLocations（）;
var radius = document.getElementById（'radiusSelect'）。value;
var searchUrl ='gmap.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 =新的google.maps.LatLngBounds（）;
（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（）{
v ar markerNum = locationSelect.options [locationSelect.selectedIndex] .value;
google.maps.event.trigger（标记[markerNum]，'点击'）;
};
}）;
}
函数createMarker（latlng，name，address）{
var html =< b> + name +< / b>< br /> +地址;
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）;
函数createOption（name，distance，num）{
var option = document.createElement（option）;
option.value = num;
option.innerHTML = name +（+ distance.toFixed（1）+）;
locationSelect.appendChild（option）;
}
函数downloadUrl（url，callback）{
var request = window.ActiveXObject？
new ActiveXObject（'Microsoft.XMLHTTP'）：
new XMLHttpRequest;
request.onreadystatechange = function（）{
if（request.readyState == 4）{
request.onreadystatechange = doNothing;
回调（request.responseText，request.status）;
}
};
request.open（'GET'，url，true）;
request.send（null）;
函数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'）;
}
}
函数doNothing（）{}
//]]>
< / script>
< / head>
< body style =margin：0px; padding：0px;的onLoad = 负载（） >
< div>
< input type =textid =addressInputsize =10/>
< select id =radiusSelect>
< option value =25selected> 25mi< / option>
< option value =100> 100mi< / option>
< option value =200> 200mi< / option>
< / select>
< input type =buttononClick =searchLocations（）value =Search/>
< / div>
< div>< select id =locationSelectstyle =width：100％; visibility：hidden>< / select>< / div>
< div id =mapstyle =width：100％; height：80％>< / div>
< / body>
< / html>
由于不鼓励使用mysql_函数，因此可以使用以下代码使用PDO： 编辑如果找不到记录， b 编辑结束 上面的查询部分 如果在搜索中找不到任何记录，并且发送到lat / lng 0,0，则添加了错误捕获。请参阅 我的实施情况 I've set up google map API that loads data from mysql database and display markers. the problem I am facing is that all the markers shows up at once no matter whatever I input in search location field.............. I want to show only the searched area and markers in that area. It shouldn't display all the markers at once but only the marker in the searched area. I mean I want to zoom the map to the searched area. Currently if I've only one marker map zoom in to show that but if I've many markers the map zoom out to show all the markers. Here is the map I'm working on "http://funfeat.com/clients/gmap/gmap3.html" NOW I've set markers very very far and the map is still showing all the markers by zooming out. The gmap.php is the file that provide xml results from mysql database. and the below code is what I am using to display map
As the use of mysql_ functions are discouraged the following code uses PDO can be used EDIT Added to catch error if no records found End of EDIT The part of the query above I have added Error catch if no records are found in search and Map sent to lat/lng 0,0. See My Implementation Here 这篇关于Google在特定区域中从数据库中映射api搜索标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ http：// funfeat .com / clients / gmap / gmap.php？lat = 47& lng = -122& radius = 2 会生成有效的XML，但是您的查询必须是错误的，它会提取10个标记，其中9个是正确，但第十届会产生< marker name =Pakistanaddress =Chowk Azam，Layyahlat =31.008364lng =71.224342type =city/>
//取决于您的设置
$ host =WWW;
$ username =XXX;
$ password =YYY;
$ database =ZZZ;
//从URL获取参数
$ center_lat = $ _GET [lat];
$ center_lng = $ _GET [lng];
$ radius = $ _GET [radius];
//启动XML文件，创建父节点
$ dom = new DOMDocument（1.0）;
$ node = $ dom-> createElement（markers）;
$ parnode = $ dom-> appendChild（$ node）;
//连接数据库
$ dbh = new PDO（mysql：host = $ host; dbname = $ database，$ username，$ password）;
$ dbh-> setAttribute（PDO :: ATTR_ERRMODE，PDO :: ERRMODE_EXCEPTION）;
try {
//准备语句
$ stmt = $ dbh-> prepare（SELECT name，lat，lng，（3959 * acos（cos（radians（？））* cos （弧度（lat））* cos（弧度（lng） - 弧度（θ））+ sin（弧度（θ））* sin（弧度（lat））））AS距离距离gbstn距离<？ORDER BY距离ASC LIMIT 0,20）;
//赋值参数
$ stmt-> bindParam（1，$ center_lat）;
$ stmt-> bindParam（2，$ center_lng）;
$ stmt-> bindParam（3，$ center_lat）;
$ stmt-> bindParam（4，$ radius）;
//执行查询
$ stmt-> setFetchMode（PDO :: FETCH_ASSOC）;
$ stmt-> execute（）;
$ b
if（$ stmt-> rowCount（）== 0）{
$ node = $ dom-> createElement（marker ）;
$ newnode = $ parnode-> appendChild（$ node）;
$ newnode-> setAttribute（name，No Records Found）;
$ newnode-> setAttribute（lat，$ center_lat）; //发送标记到搜索位置
$ newnode-> setAttribute（lng，$ center_lng）;
$ newnode-> setAttribute（distance，0）;
}
else {
//遍历行，为每个
添加XML节点，（$ row = $ stmt-> fetch（））{
$ 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（）;
catch（PDOException $ e）{
echo对不起，我担心你不能这么做。 。 $ e-> getMessage（）; //在测试后删除或修改
file_put_contents（'PDOErrors.txt'，date（'[Ymd H：i：s]'）。，gmap.php。 $ e-> getMessage（）。\r\\\
，FILE_APPEND）;
}
//关闭连接
$ dbh = null;
HAVING distance< '％s'是应该清除最后一个标记的部分。
<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.googleapis.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: 10,
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 = 'gmap.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="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>
<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: 80%"></div>
</body>
</html>
http://funfeat.com/clients/gmap/gmap.php?lat=47&lng=-122&radius=2 produces valid XML but your query must be wrong .It pulls out 10 markers, 9 of which are correct but the 10th produces <marker name="Pakistan" address="Chowk Azam, Layyah" lat="31.008364" lng="71.224342" type="cITY"/> which is certainly not within 2 miles of the coordinates. Your query should not pick up the last marker from the database.//dependant on your setup
$host= "WWW";
$username="XXX";
$password="YYY";
$database="ZZZ";
// 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);
//Connect to database
$dbh = new PDO("mysql:host=$host;dbname=$database", $username, $password);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
try {
// Prepare statement
$stmt = $dbh->prepare("SELECT name, lat, lng, ( 3959 * acos( cos( radians(?) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(?) ) + sin( radians(?) ) * sin( radians( lat ) ) ) ) AS distance FROM gbstn HAVING distance < ? ORDER BY distance ASC LIMIT 0 , 20");
// Assign parameters
$stmt->bindParam(1,$center_lat);
$stmt->bindParam(2,$center_lng);
$stmt->bindParam(3,$center_lat);
$stmt->bindParam(4,$radius);
//Execute query
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$stmt->execute();
if ($stmt->rowCount()==0) {
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", "No Records Found");
$newnode->setAttribute("lat", $center_lat);//Sends marker to search location
$newnode->setAttribute("lng", $center_lng);
$newnode->setAttribute("distance", 0);
}
else {
// Iterate through the rows, adding XML nodes for each
while($row = $stmt->fetch()) {
$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();
}
catch(PDOException $e) {
echo "I'm sorry I'm afraid you can't do that.". $e->getMessage() ;// Remove or modify after testing
file_put_contents('PDOErrors.txt',date('[Y-m-d H:i:s]').", gmap.php, ". $e->getMessage()."\r\n", FILE_APPEND);
}
//Close the connection
$dbh = null;
HAVING distance < '%s' is the part that should weed out the last marker.
