如何使用Javascript从mysql绘制多段线google地图_Javascript_Php_Mysql_Google Maps

如何使用Javascript从mysql绘制多段线google地图

javascript php mysql google-maps

如何使用Javascript从mysql绘制多段线google地图,javascript,php,mysql,google-maps,Javascript,Php,Mysql,Google Maps,我正在尝试使用存储在mysql表中的坐标将多段线插入google地图。我对php相当陌生这是我的密码 function initialize() { var mapOptions = { zoom: 12, center: new google.maps.LatLng(-7.275920,112.791871), mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElem

我正在尝试使用存储在mysql表中的坐标将多段线插入google地图。我对php相当陌生

这是我的密码

function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-7.275920,112.791871),
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

var flightPlanCoordinates = [
<?php
include('koneksi.php');
$sql = mysql_select_db('test', $connection);

$query1 = mysql_query ("SELECT lat FROM user_location");
$query11 = mysql_query ("SELECT long1 FROM user_location");

$query2 = mysql_query ("SELECT lat name FROM route");
$query22 = mysql_query ("SELECT lng,name FROM route");

$query3 = mysql_query ("SELECT lat2 FROM user_location");
$query33 = mysql_query ("SELECT long2 FROM user_location");

$data1 = mysql_fetch_assoc($query1);
$data2 = mysql_fetch_assoc($query11);
$data3 = mysql_fetch_assoc($query2);
$data4 = mysql_fetch_assoc($query22);
$data5 = mysql_fetch_assoc($query3);
$data6 = mysql_fetch_assoc($query33);
?>

var result1 = "<?php echo $data1; ?>";
var result2 = "<?php echo $data2; ?>";
var result3 = "<?php echo $data3; ?>";
var result4 = "<?php echo $data4; ?>";
var result5 = "<?php echo $data5; ?>";
var result6 = "<?php echo $data6; ?>";

new google.maps.LatLng(result1, result2),
new google.maps.LatLng(result3, result4),
new google.maps.LatLng(result5, result6)
];

var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}

函数初始化（）{
变量映射选项={
缩放：12，
中心：新google.maps.LatLng（-7.275920112.791871），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var FlightPlan坐标=[
var result1=“”；
var result2=“”；
var result3=“”；
var result4=“”；
var result5=“”；
var result6=“”；
新的google.maps.LatLng（result1，result2），
新的google.maps.LatLng（result3，result4），
新的google.maps.LatLng（结果5，结果6）
];
var flightPath=new google.maps.Polyline({
路径：FlightPlan坐标，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
flightPath.setMap（map）；
}

当我在myweb上运行时，没有结果。只是空白，但没有错误

好吧，根据您提供的信息，这是一个很难解决的问题，所以我尽了最大努力。另外，mysql在PHP5.5.0之后也被弃用。你应该使用mysqli。虽然这会解决您的问题，但我建议您查看数据库的结构方式以及如何执行查询

结果：

源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
    function initialize() {
    var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-7.275920,112.791871),
    mapTypeId: google.maps.MapTypeId.TERRAIN
    };


    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    var flightPlanCoordinates = [
    <?php
    //If konesi.php outputs ANYTHING, the map will fail to load. However, you should
    //change the connection variable to $connection = mysqli_connect("HOST","USERNAME","PASSWORD","DATABASE");
    include('koneksi.php');

    //switch to correct database
    mysqli_select_db($connection,"test");

    //Query the user for start and ending location. Store locations in variables
    $query = mysqli_query($connection,"SELECT lat, long1, lat2, long2 FROM user_location LIMIT 1");
    $row = mysqli_fetch_assoc($query);
    $lat = $row['lat'];
    $lon = $row['long1'];
    $lat2 = $row['lat2'];
    $lon2 = $row['long2'];

    //Echo out the users start location
    echo 'new google.maps.LatLng('.$lat.', '.$lon.'),';

    //Assuming route that lat and long coordinates are in multiple records and not in a array within a single record
    //Loop through all records and echo out the positions
    $query = mysqli_query($connection,"SELECT lat, lng FROM route");
    while($row = mysqli_fetch_assoc($query)){
        $lat = $row['lat'];
        $lon = $row['lng'];
        echo 'new google.maps.LatLng('.$lat.', '.$lon.'),';
    }

    //echo users ending position
    echo 'new google.maps.LatLng('.$lat2.', '.$lon2.')';

    ?>

    ];

    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    flightPath.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

    -7.322984, 112.716165 User Start
    -7.317110, 112.717109 Route Record
    -7.310725, 112.712560 Route Record
    -7.306511, 112.701102 Route Record
    -7.292974, 112.698012 Route Record
    -7.280586, 112.708140 Route Record
    -7.272754, 112.708612 User End

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `test`
--

-- --------------------------------------------------------

--
-- Table structure for table `route`
--

CREATE TABLE IF NOT EXISTS `route` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`lat` varchar(100) NOT NULL,
`lng` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

--
-- Dumping data for table `route`
--

INSERT INTO `route` (`id`, `name`, `lat`, `lng`) VALUES
(5, '', '-7.317110', '112.717109'),
(6, '', '-7.310725', '112.712560'),
(7, '', '-7.306511', '112.701102'),
(8, '', '-7.292974', '112.698012'),
(9, '', '-7.280586', '112.708140');

-- --------------------------------------------------------

--
-- Table structure for table `user_location`
--

CREATE TABLE IF NOT EXISTS `user_location` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`lat` varchar(100) NOT NULL,
`long1` varchar(100) NOT NULL,
`lat2` varchar(100) NOT NULL,
`long2` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `user_location`
--

INSERT INTO `user_location` (`id`, `lat`, `long1`, `lat2`, `long2`) VALUES
(1, '-7.322984', '112.716165', '-7.272754', '112.708612');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

SQL转储：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
    function initialize() {
    var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-7.275920,112.791871),
    mapTypeId: google.maps.MapTypeId.TERRAIN
    };


    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    var flightPlanCoordinates = [
    <?php
    //If konesi.php outputs ANYTHING, the map will fail to load. However, you should
    //change the connection variable to $connection = mysqli_connect("HOST","USERNAME","PASSWORD","DATABASE");
    include('koneksi.php');

    //switch to correct database
    mysqli_select_db($connection,"test");

    //Query the user for start and ending location. Store locations in variables
    $query = mysqli_query($connection,"SELECT lat, long1, lat2, long2 FROM user_location LIMIT 1");
    $row = mysqli_fetch_assoc($query);
    $lat = $row['lat'];
    $lon = $row['long1'];
    $lat2 = $row['lat2'];
    $lon2 = $row['long2'];

    //Echo out the users start location
    echo 'new google.maps.LatLng('.$lat.', '.$lon.'),';

    //Assuming route that lat and long coordinates are in multiple records and not in a array within a single record
    //Loop through all records and echo out the positions
    $query = mysqli_query($connection,"SELECT lat, lng FROM route");
    while($row = mysqli_fetch_assoc($query)){
        $lat = $row['lat'];
        $lon = $row['lng'];
        echo 'new google.maps.LatLng('.$lat.', '.$lon.'),';
    }

    //echo users ending position
    echo 'new google.maps.LatLng('.$lat2.', '.$lon2.')';

    ?>

    ];

    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    flightPath.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

    -7.322984, 112.716165 User Start
    -7.317110, 112.717109 Route Record
    -7.310725, 112.712560 Route Record
    -7.306511, 112.701102 Route Record
    -7.292974, 112.698012 Route Record
    -7.280586, 112.708140 Route Record
    -7.272754, 112.708612 User End

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `test`
--

-- --------------------------------------------------------

--
-- Table structure for table `route`
--

CREATE TABLE IF NOT EXISTS `route` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`lat` varchar(100) NOT NULL,
`lng` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

--
-- Dumping data for table `route`
--

INSERT INTO `route` (`id`, `name`, `lat`, `lng`) VALUES
(5, '', '-7.317110', '112.717109'),
(6, '', '-7.310725', '112.712560'),
(7, '', '-7.306511', '112.701102'),
(8, '', '-7.292974', '112.698012'),
(9, '', '-7.280586', '112.708140');

-- --------------------------------------------------------

--
-- Table structure for table `user_location`
--

CREATE TABLE IF NOT EXISTS `user_location` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`lat` varchar(100) NOT NULL,
`long1` varchar(100) NOT NULL,
`lat2` varchar(100) NOT NULL,
`long2` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `user_location`
--

INSERT INTO `user_location` (`id`, `lat`, `long1`, `lat2`, `long2`) VALUES
(1, '-7.322984', '112.716165', '-7.272754', '112.708612');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;