Question

我正在尝试显示一张地图，其中包含从用户当前位置到我从数据库获取的坐标的路径。

我正确地得到了坐标但我无法在地图上使用它们。

关键：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDB-9d7kH95-ps-QXbhUeERjSrqz5SDxpc&callback=initMap"></script>

<script>
    //gets coordinates from database into the var called lat
    var lat = '<?php
    $mysqlserver = "localhost";
    $mysqlusername = "root";
    $mysqlpassword = '';
    $dbname = "hair_studios";
    $con = mysqli_connect($mysqlserver, $mysqlusername, $mysqlpassword) or die("Failed to connect to MySQL: " . mysqli_error());
    $db = mysqli_select_db($con, $dbname) or die("Failed to connect to MySQL: " . mysqli_error());

    $cord = mysqli_query(
        $con,
        "SELECT `Latitude`,`Longitude`
           FROM `all_studios`
          WHERE Studio_Name = 'Skydiva Beauty Works'"
    );

    while ($results = mysqli_fetch_array($cord)) {
        $lat = $results['Latitude'];
        $long = $results['Longitude'];

        echo ' \"'. $lat . ',' . $long .'\" ';
    }
    ?>';

    //displaying the coordinates:

    alert(lat);

    //the mapping funcion

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        error('not supported');
    }

    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function success(position) {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(lat);
        var mapOptions = {
            zoom:15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: latlng
            }

        map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directionPanel"));

        var start = lat;
        var end =  position.coords.latitude + ',' + position.coords.longitude;
        var mode;

        switch ( 'driving' )
            {
            case 'bicycling' :
                mode = google.maps.DirectionsTravelMode.BICYCLING;
                break;
            case 'driving':
                mode = google.maps.DirectionsTravelMode.DRIVING;
                break;
            case 'walking':
                mode = google.maps.DirectionsTravelMode.WALKING;
                break;
            }

        var request = {
            origin:start,
            destination:end,
            travelMode: mode
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
            }
        });

    }

    function error(msg) {
        var s = document.querySelector('#status');
        s.innerHTML = typeof msg == 'string' ? msg : "failed";
        s.className = 'fail';

        console.log(arguments);
    }

</script>

Answer 1

google.maps.LatLng构造函数将两个 Numbers 作为参数，而不是逗号分隔的字符串。

在javascript控制台中应该有一个错误。

谷歌地图不会显示

1 个答案: