关于html5 谷歌地图路径导航路线问题

香蕉猪 2013-11-06 11:49:35

今天在利用html5制作地图进行导航的过程中，出现地点可以定位，但是没有路线规划出来。上代码，哪位大神帮忙看看是出什么问题了~感激不尽~~~



var newMap = {a:{},b:{name:"目的地"}}; //全局变量

newMap.directionsDisplay = {};    

newMap.directionsService = new google.maps.DirectionsService(); //这两个是在导航的时候用到的





//初始化地图

function init_Map(mapCenter) {

    newMap.directionsDisplay = new google.maps.DirectionsRenderer();

    var myOptions = {

        zoom:16,

        mapTypeId: google.maps.MapTypeId.ROADMAP, //地图类型

        center: mapCenter   //LatLng 对象

    }

    newMap.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    newMap.directionsDisplay.setMap(newMap.map); 

}







//导航方法

function My_calcRoute(start,end) {

    var request = {

        origin:start,  //开始的位置 （A）

        destination:end, //开始的位置 （B）

        travelMode: google.maps.TravelMode.DRIVING   //导航类型 驾驶

    };

    newMap.directionsService.route(request, function(result, status) {

        if (status == google.maps.DirectionsStatus.OK) {

            directionsDisplay.setDirections(result);

        }

    });

}





function getMyLatLng(){

    if( navigator.geolocation ) {

        function gpsSuccess(pos){



            if( pos.coords ){

                newMap.a.lat = pos.coords.latitude;

                newMap.a.lng = pos.coords.longitude;

            }

            else{

                newMap.a.lat = pos.latitude;

                newMap.a.lng = pos.longitude;

            }

            var userPositon = new google.maps.LatLng(newMap.a.lat,newMap.a.lng);

            var crsPositon = new google.maps.LatLng("22.81366","108.34083");

            init_Map(userPositon);

            My_calcRoute(userPositon,crsPositon);

            addMarker(crsPositon,newMap.map,newMap.b.name);

            addMarker(userPositon,newMap.map, "您当前位置");

        }

        function gpsFail(){

            alert('无法获取您的地理位置信息');

            var obj = new google.maps.LatLng(newMap.b.lat,newMap.b.lng);

            init_Map(obj);

            addMarker(obj,newMap.map, newMap.b.name);

        }

        navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 3000000,timeout:20*1000});

    }

}



/**添加小红点标记*/

function addMarker(location,map,contentString) {

    var marker = new google.maps.Marker({

        position: location,

        'draggable': false,

        'animation': google.maps.Animation.DROP,

        map: map

    });

    var infowindow = new google.maps.InfoWindow({

        content: contentString

    });

    google.maps.event.addListener(marker, 'click', function(){

        infowindow.open(map,marker);

    });

}

...全文

492 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

香蕉猪 2013-11-13

打赏
举报

跟大家分享一下最后的代码： //导航方法 function calcRoute(start,end) { var request = { origin:start, //开始的位置（A） destination:end, //开始的位置（B） travelMode: google.maps.TravelMode.DRIVING /*导航类型驾驶*/ }; newMap.directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { newMap.directionsDisplay.setDirections(result); } }); }

香蕉猪 2013-11-13