问:您好,我如何通过在网页上的文本框中输入用户ID号来找到地图上的位置,并从MySQL数据库中提取具有相应坐标的表格中的信息,并立即显示在该页面的地图上。
答:您可以简单地从数据库中获取经度和经度,然后将其传递到地图api中。请看看
<?php
if($&#95; SERVER ['REQUEST&#95; METHOD'] =='GET'&& isset($&#95; GET ['ajax'])){
$ dbhost ='本地主机';
$ dbuser ='root';
$ dbpwd ='xx';
$ dbname ='xxx';
$ db =新的mysqli($ dbhost,$ dbuser,$ dbpwd,$ dbname);
$ places = array();
$ sql ='选择
`location&#95; name`为\'name \',
`location&#95; Latitude`为\'lat \',
`location&#95; Longitude`为\'lng \'
来自`地图
限制100';
$ res = $ db-> query($ sql);
if($ res)while($ rs = $ res-> fetch&#95; object())$ places [] = array('latitude'=> $ rs-> lat,'longitude'=> $ rs-> lng ,'name'=> $ rs-> name);
$ db-> close();
header('Content-Type:application / json');
echo json&#95; encode($ places,JSON&#95; FORCE&#95; OBJECT);
出口();
}
?>
<!doctype html>
<html>
<头>
<meta charset ='utf-8'/>
<title> Google地图</ title>
<script src =“ https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”> </ script>
<script src ='https://maps.google.com/maps/api/js'type ='text / javascript'> </ script>
<script type ='text / javascript'>
(功能(){
var map,marker,latlng,bounds,infowin;
/ *地图的初始位置* /
var _lat = 56.61543329027024;
var _lng = -2.9266123065796137;
var getacara = 0; / *这应该是什么?它是一个函数,一个变量??? * /
函数showMap(){
/ *设置默认的初始位置* /
latlng = {lat:_lat,lng:_lng};
bounds = new google.maps.LatLngBounds();
infowin =新的google.maps.InfoWindow();
/ *调用地图* /
map = new google.maps.Map(document.getElementById('map'),{
中心:latlng,
变焦:10
});
/ *显示初始标记* /
marker = new google.maps.Marker({
位置:
地图:
标题:“世界你好!”
});
bounds.extend(marker.position);
/ *我想您可以在showMap函数中使用像这样的jQuery吗?* /
$ .ajax({
/ *
我将同一页用于数据库结果,但是您会
更改以下内容以指向您的php脚本〜即
phpmobile / getlanglong.php
* /
网址:document.location.href,/ *'phpmobile / getlanglong.php'* /
数据:{'id':getacara,'ajax':true},
dataType:'json',
成功:功能(数据,状态){
$ .each(data,function(i,item){
/ *为响应数据中的每个位置添加一个标记* /
addMarker(item.latitude,item.longitude,item.name);
});
},
错误:function(){
output.text('加载数据时出错。');
}
});
}
/ *简单的功能只是添加一个新标记* /
函数addMarker(lat,lng,title){
marker = new google.maps.Marker({/ *使用parseFloat()将返回的数据转换为float形式* /
位置:{lat:parseFloat(lat),lng:parseFloat(lng)},
地图:
标题:title
});
google.maps.event.addListener(标记,“单击”,函数(事件){
infowin.setContent(this.title);
infowin.open(map,this);
infowin.setPosition(this.position);
} .bind(marker));
bounds.extend(marker.position);
map.fitBounds(bounds);
}
document.addEventListener('DOMContentLoaded',showMap,false);
}());
</ script>
<样式>
html,html正文,#map {高度:100%;宽度:100%; 填充:0; 保证金:0; }
</ style>
</ head>
<身体>
<div id ='map'> </ div>
</ body>
</ html>
在上面的代码中,请替换为&#95; 与_