从数据库中获取数据并将其绘制在谷歌地图上
fetch data from database and plot it on google map
我有一个索引页面,有 2 个下拉列表。 第二个下拉列表取决于第一个下拉列表,从第二个列表中选择一个值后,通过数据库表对所选值执行搜索,然后显示匹配结果。 我想要的是,正在消失的结果(在这种情况下,与结果对应的纬度和经度)应该显示在谷歌地图上
到目前为止我拥有的代码
主页上包含下拉列表的代码,将显示地图
<div class="showsearch" id="gmap_canvas"> //place where the ,ap should get displayed
</div>
执行搜索以显示结果的代码,也应该适用于地图
<?php
include("connection.php");
if(isset($_POST['fname']))
{
$fname = mysqli_real_escape_string($con, $_POST['fname']);
$sql1 = 'SELECT * FROM features_for_office WHERE fname LIKE "%'.$fname.'%"';
$result = mysqli_query($con, $sql1);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$latitude= $row["latitude"];
$longitude= $row["longitude"];
}
?>
<!-- JavaScript to show google map -->
<div class="showsearch" id="gmap_canvas"></div>
<script>
function init_map(lat,lang) {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(lat, lang),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
});
/*infowindow = new google.maps.InfoWindow({
content: "<?php echo $formatted_address; ?>"
});*/
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
function loadCoordinates(){
var latitude;
var longitude;
$('.showsearch').blur(function() {
$.ajax({
type: "GET",
dataType: "json",
url: "get_search_data.php",
data: "name="+$(this).val(),
success: function(json){
$('#number').val(json.num);
}
});
});
//call the function once coordinates are available from the server/
//init_map must be called from the call back of ajax function
init_map(latitude,longitude);
}
//instead of init_map call the loadCoordinates to get the values from server
google.maps.event.addDomListener(window, 'load', loadCoordinates);
</script>
<?php }
else
{
echo "0 results";
}
mysqli_close($con);
}
?>
虽然我得到了纬度和经度的值,但我无法显示地图以及特定纬度和经度上的标记。 任何帮助将不胜感激
考虑到您正在从服务器检索坐标值,您可以修改地图渲染代码,以根据通过 AJAX 从服务器检索的经纬度值加载地图。在要显示地图的页面上,您可以有下面提到的代码。
<div class="showsearch" id="gmap_canvas"> </div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init_map(lat,lang) {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(lat, lang),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
});
/*infowindow = new google.maps.InfoWindow({
content: "<?php echo $formatted_address; ?>"
});*/
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
function loadCoordinates(){
$('.showsearch').blur(function() {
$.ajax({
type: "GET",
dataType: "json",
url: "get_search_data.php",
data: "name="+$(this).val(),
success: function(json){
var latitude;
var longitude;
latitude = LATITUDE_VALUE_FROM_SERVER;
longitude = LONGTITUDE_VALUE_FROM_SERVER;
init_map(latitude,longitude);
}
});
});
}
//instead of init_map call the loadCoordinates to get the values from server
google.maps.event.addDomListener(window, 'load', loadCoordinates);
</script>
您将需要使用 ajax 调用从服务器检索坐标值,并在 ajax 函数的回调中调用函数以加载映射。
相关文章:
- 在谷歌地图上绘制位置数据库
- 使用复选框绘制多段线谷歌地图API3,不'不起作用
- 谷歌地图API在Javascript中,绘制圆的半径
- 使用Raphael js直接在谷歌地图上绘制
- 谷歌地图/GMAP3 - 绘制从用户地理位置到已知目的地的路线 - 需要帮助
- 如何使用谷歌地图绘制已知路线 JavsScript API V3.
- 如何在谷歌地图API中使用坐标数组绘制多边形
- 使用谷歌地图绘制半径内的点
- 尝试在谷歌地图V3中绘制超过10个标记,不使用地理编码
- 如何在绘制谷歌地图后将其更改为卫星视图
- 在谷歌地图中绘制闪电数据
- 如何在谷歌地图上绘制图形从网上墨卡托米/英尺
- 使用本地存储绘制谷歌地图
- 谷歌地图绘制多边形并警告重叠
- 将多个谷歌地图绘制到页面
- 谷歌地图:实时绘制和更新折线
- 在父容器上重新绘制谷歌地图,调整大小
- 重新绘制谷歌地图以查看隐藏的移动标记
- 如果我只知道它的大小和东北角,如何绘制谷歌地图矩形
- 在函数调用中重新绘制谷歌地图圆圈和标记