如何从服务器上的数据库获取坐标,选中复选框并在googlemaps上显示?

时间:2014-04-03 10:15:25

标签: javascript php ajax json google-maps-api-3

我是谷歌地图的新手。我已经成功完成了根据坐标绘制路线的工作,但是我点击鼠标就得到了坐标。 从用户点击获取坐标,放置标记并扩展路线。 现在我想要做的是用从数据库中获取值来替换这个双击事件。这是我的详细代码

CODE

// InitializeMap()函数用于在页面加载时初始化谷歌地图。

function InitializeMap() {
    //DirectionsRenderer() is a used to render the direction
    _directionsRenderer = new google.maps.DirectionsRenderer();

    //Set the your own options for map.
    var myOptions = {
        zoom: zoom_option,
        zoomControl: true,
        center: new google.maps.LatLng(30.3753, 69.3451),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

//定义地图。

map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
    //Set the map for directionsRenderer
    _directionsRenderer.setMap(map);

    //Set different options for DirectionsRenderer mehtods.
    //draggable option will used to drag the route.
    _directionsRenderer.setOptions({
        draggable: false
    });

这是我想要取代的部分

 //Add the doubel click event to map.
    google.maps.event.addListener(map, "dblclick", function(event) {
        var _currentPoints = event.latLng;
        _mapPoints.push(_currentPoints);
        LegPoints.push('');
        getRoutePointsAndWaypoints(_mapPoints);
    });

    /*continue*/

这是我想做的事情

 if(checkbox is checked){
    getvehicleno;
send vehicleno and request php script(in php file) to execute query and get coordinates, and send these 
coordinates to client side i.e., map.js file.

我在google地图上搜索了很多,在google上使用ajax等找到了一些教程,但是非常复杂,如果有人能够至少告诉我如何请求php脚本从数据库中获取数据然后如何接收它? 我是新的堆栈溢出,如果我的问题没有很好地格式化或解释,请提问,我会尽力回答。

解决

Java脚本

function get_coordinates(checkbox){
    var v_id=checkbox.id;
    if(checkbox.checked){
        var hr = new XMLHttpRequest();
        hr.open("POST", "fetch_coordinates.php", true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                var data = JSON.parse(hr.responseText);
                var lat=data.loc.lat;
                var lon=data.loc.lon;
                addmarker(lat,lon,v_id); //this method adds marker
            }
        }
         hr.send("id="+v_id);   
    }

PHP(fetch_coordinates.php)

<?php
header("Content-Type: application/json");
$vno=$_POST['id'];
require 'connection.php';
$res=  mysql_query("select lat,lang from location where v_no='$vno'");
while ($row = mysql_fetch_array($res)) {
    $lat=$row['lat'];
    $lon=$row['lang'];
}
$jsonData = '{ "loc":{ "lat":"'.$lat.'", "lon":"'.$lon.'" } }';
echo $jsonData;
?>

0 个答案:

没有答案