zoukankan html css js c++ java

使用 html5 显示导航路线谷歌地图api

最近在项目遇到一个关于谷歌地图的问题，看了下谷歌地图api后实现了导航和定位的功能,特意记录下，以便以后查看.

整个流程从服务端获得目的地（简称 B）的经纬度地址，通过客户端获得用户(简称A)的经纬度地址,

如果成功获得B的经纬度就在地图上显示出A到B的驾车路径,

如果没有获得A的经纬度则在地图上显示B的位置并明确标识.

拆分下整个需求，需要这些功能

1.渲染地图;

2.在地图上标识某地;

3.获得用户的经纬度;

4.在地图上显示导航路线.

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

1.显示地图；

看google的api

引入入地图api

看看谷歌官方的例子，渲染地图很简单的……

这是自己的代码

<!DOCTYPE HTML>
<html lang="zh-ch">
<head>
<title>谷歌地图</title>
<meta charset="utf-8">

</body>
</html>

js 代码initMap 渲染地图

var newMap = {a:{},b:{name:"目的地"}}; //全局变量
newMap.directionsDisplay = {};    
newMap.directionsService = new google.maps.DirectionsService(); //这两个是在导航的时候用到的
//初始化地图
function initMap(mapCenter) {
    newMap.directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom:10,
        mapTypeId: google.maps.MapTypeId.ROADMAP, //地图类型
        center: mapCenter   //LatLng 对象
    }
    newMap.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

newMap.directionsDisplay.setMap(newMap.map); }

js 方法 calcRoute() 导航

//导航方法
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) {
            directionsDisplay.setDirections(result);
        }
    });
}

2.获得用户的当前的地理位置信息

使用html5的方法来 geolocation.getCurrentPosition() 获得地址，这方法在移动设备上好用，pc上不好用. 这个和有没有网络没有关系,没有网络也是可用的

function getLatLng(){

    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(newMap.b.lat,newMap.b.lng);
            initMap(userPositon);
            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);
            initMap(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);
    });
}

把这些方法拼装起来ok

ok完整的例子

demo地址

查看全文

相关阅读:
键盘移动小div(js原生)
递归好理解,可是不好用啊
 jsonp
闭包
 json
来个小例子(ajax)
ajax小demo
制作H5响应式页面注意事项、微信二次分享
 Button按钮--inject与provide
webpack基本打包配置流程

原文地址：https://www.cnblogs.com/acmilan/p/2469051.html

使用 html5 显示导航路线 谷歌地图api

使用 html5 显示导航路线谷歌地图api