谷歌地图接口，实现导航功能。

最新推荐文章于 2025-08-13 21:05:35 发布
转载 最新推荐文章于 2025-08-13 21:05:35 发布 · 1.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/bin-pureLife/p/4200779.html
文章标签：

#javascript #php #ViewUI

本文介绍了一个基于Google Maps API的路线规划应用示例。该示例通过网页形式实现，允许用户输入起始地和目的地，并选择不同的出行方式（如驾车、骑行、步行或公交）。此外，还提供了丰富的配置选项，例如选择单条路线或展示多条备选路线等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2015年第一篇博客；

谷歌地图接口：

Google Directions API

demo code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps get Around</title>
<script src="./tpl/Home/vifnn/common/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
var infowindow,marker,marker_start,marker_end,info_start,info_end;
var geocoder = new google.maps.Geocoder();
var point,map;
var colorArray = new Array(
        '#FF0000','#FF00FF','#D15FEE','#B03060',
        '#00CD00','#0F0F0F','#1E90FF','#66CDAA',
        '#87CEFF','#7D9EC0','#8B7B8B','#CD2990',
        '#BDB76B','#BC8F8F','#BF3EFF','#BC8F8F',
        '#B4EEB4','#AB82FF','#A52A2A','#8E388E',
        '#8B8B00','#98F5FF','#CD3333','#EE2C2C'
);
var arr_map = new Array();
function initialize() {
    //var point = new google.maps.LatLng(18.252847, 109.511909);

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            point = new google.maps.LatLng(
                    position.coords.latitude,
                    position.coords.longitude
            );
            loadMap(point);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation();
    }

}
function loadMap(point){
    var myOptions = {
        zoom: 13, 
        center: point,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false, 
        overviewMapControl: false, 
        scaleControl: false, 
        streetViewControl: false 
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
        position: point,
        map: map
    });
    marker.setDraggable(true); 
    infowindow = new google.maps.InfoWindow({
        content: "",
        size: new google.maps.Size(50,50)
    });
    google.maps.event.addListener(marker, 'dragend', function(){
        showAddress(map, marker);
    });

    google.maps.event.addListener(marker, 'click', function(){
        showAddress(map, marker);
    });

    google.maps.event.addListener(map, 'click', function(e) {
        clickMou(map,marker,e.latLng);
    });

    showAddress(map,marker);
}

function handleNoGeolocation() {
    point = new google.maps.LatLng(28.127907999999998, 112.98059999999998);
    loadMap(point);
}

function makeInfo(obj,latlng){
    var address = obj[1].formatted_address + "<br />";
    address = obj[0].formatted_address + "<br />";
    address += "纬度：" + latlng.lat() + "<br />";
    address += "经度：" + latlng.lng();
    infowindow.setContent(address);
    infowindow.open(map, marker);
}
function showAddress(map, marker)
{
    var latlng = marker.getPosition();
    geocoder = new google.maps.Geocoder();

    geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                makeInfo(results,latlng)
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
}

function clickMou(map, marker,location)
{
    marker.setPosition(location)
    geocoder.geocode({'latLng': location}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                makeInfo(results,latlng)
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
}

function initializeMarksAndInfo(){
    info_start = new google.maps.InfoWindow({
        content: "",
        size: new google.maps.Size(50,50)
    });
    info_end = new google.maps.InfoWindow({
        content: "",
        size: new google.maps.Size(50,50)
    });
}

function markAndInfo(point,content,parm){

    if(parm == 1){
        if(marker_start == undefined){
            marker_start = new google.maps.Marker({
                position: point,
                map: map
            });
        }else{
            marker_start.setPosition(point);
        }
        info_start.setContent(content);
        info_start.open(map, marker_start);
    }else{
        if(marker_end == undefined){
            marker_end = new google.maps.Marker({
                position: point,
                map: map
            });
        }else{
            marker_end.setPosition(point)
        }
        info_end.setContent(content);
        info_end.open(map, marker_end);
    }

}

$(function(){
    modeToSelect('driving');
    initializeMarksAndInfo();

    $("#typeway").change(function(){
        $mode = $(this).val()
        modeToSelect($mode);
    })

    $("button").click(function(){
        $("#div_json").empty();
        $("#disc_desc").empty();
        $mode = $("#typeway").val();
        $json = getJson($mode);
        $.get("/index.php?g=Home&m=Map&a=getDirection&r=" + Math.random(),$json
                , function(data, textStatus) {
                    //$("#div_json").text(data);
                    $obj = eval("("+data+")");
                  
                    if(arr_map.length > 0){

                        for(var m = 0; m < arr_map.length; m++){
                            arr_map[m].setMap(null);
                        }
                        arr_map.splice(0,arr_map.length);
                    }

                    if($obj.status == "OK"){
                        for(var j = 0; j <$obj.routes.length;j++ ){
                            $data_array = $obj.routes[j].legs[0];

                            $point_start = new google.maps.LatLng($data_array.start_location.lat,$data_array.start_location.lng);
                            $point_end = new google.maps.LatLng($data_array.end_location.lat,$data_array.end_location.lng);

                            $address_start = $data_array.start_address + "<br />";
                            $address_start += "纬度：" + $data_array.start_location.lat + "<br />";
                            $address_start += "经度：" + $data_array.start_location.lng;

                            $address_end = $data_array.end_address + "<br />";
                            $address_end += "纬度：" + $data_array.end_location.lat+ "<br />";
                            $address_end += "经度：" + $data_array.end_location.lng;

                            markAndInfo($point_start,$address_start,1);
                            markAndInfo($point_end,$address_end,2);

                            $("#div_json").append('<div>方案'+(j+1)+':'+$obj.routes[j].summary+'全程'+$data_array.distance.text+',大约耗时'+$data_array.duration.text+"</div>");
                            $data_steps = $data_array.steps;

                            if($mode == 'transit'){
                                for(var i =0;  i< $data_steps.length;i++){
                                    $temp = $data_steps[i];
                                    $("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");

                                    if($temp.travel_mode == 'WALKING'){
                                        $temp_arr = $temp['steps'];
                                        if($temp_arr.length > 1){
                                            for(var i_i = 0; i_i < $temp_arr.length; i_i++){
                                                $temp = $temp_arr[i_i];
                                                $("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+"_"+(i_i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");
                                            }
                                        }

                                    }else{

                                        $temp = $temp.transit_details;
                                        $("#div_json").append("<div>"+$temp.line.short_name+"--"+($temp.headway)/60+"/趟</div>");
                                        $("#div_json").append("<div>"+$temp.departure_stop.name+"--"+$temp.arrival_stop.name+"--共"+$temp.num_stops+"站</div>");
                                    }

                                }
                            }else{
                                for(var i =0;  i< $data_steps.length;i++){
                                    $temp = $data_steps[i];
                                    $("#div_json").append("<div>step"+(j+1)+"_"+(i+1)+":"+$temp.html_instructions+""+$temp.distance.text+"耗时"+$temp.duration.text+"</div>");
                                }

                            }


                            /*var marker_new = new google.maps.Marker({
                             position: $obj.routes[0].overview_polyline.points,
                             map: map
                             });*/

                            var encodedPoints   = $obj.routes[j].overview_polyline.points;
                            var decodedPoints  =  google.maps.geometry.encoding.decodePath(encodedPoints) ;

                            arr_map[j] = new google.maps.Polyline ( {
                                strokeColor: colorArray[j] ,
                                strokeOpacity: 1.0 ,
                                strokeWeight: 2 ,
                                path: decodedPoints ,
                                clickable: false
                            })
                            arr_map[j].setMap(map)
                         }
                    }else{
                        alert('没有找到路线')
                    }
                });
    });
})

function getJson(type){
    $start = $("#start").val();
    $end = $("#end").val();
    $json = {'start':$start,'end':$end,'type':type};
    if(type != "transit"){
        $json.alternatives = $("#alternatives").val();
        $json.avoid = $(':radio[name="avoid"]:checked').val();
    }else{
        $json.start_time = $("#start_time").val();
        $json.end_time = $("#end_time").val();
    }
    return $json;
}
function modeToSelect(type){
    var html_first = '<option value="false" selected>单路线查询<option value="true">多线路查询';
    var html_second = '<input type="radio" name="avoid" value= "highways" >避开高速公路<input type="radio" name="avoid" value= "tolls">避开收费公路/桥梁';
    var html_third = '<input type="radio" name="avoid" value= "highways" >观光路线';
    var html_forth;
    $("#alternatives").empty();
    $("#alternatives").hide()
    $("#avoid").empty();
    $("#avoid").hide()
    $("#start_time").empty();
    $("#start_time").hide()
    $("#end_time").empty();
    $("#end_time").hide()
    $("#bus_desc").hide();
    switch (type){
        case "driving":
            $("#alternatives").append(html_first);
            $("#alternatives").fadeIn();
            $("#avoid").append(html_second);
            $("#avoid").fadeIn();
            break;
        case "bicycling":
            $("#alternatives").append(html_first);
            $("#alternatives").fadeIn();
            $("#avoid").append(html_third);
            $("#avoid").fadeIn();
            break;
        case "transit":
            for(var i = 0; i<24; i++){
                if(i >=10){
                    html_forth += '<option value="'+i+':00:00">'+i+':00:00';
                    html_forth += '<option value="'+i+':30:00">'+i+':30:00';
                }else{
                    //09:42:22
                    if(i == 6){
                        html_forth += '<option value="0'+i+':00:00" selected>0'+i+':00:00';
                    }else{
                        html_forth += '<option value="0'+i+':00:00">0'+i+':00:00';
                    }
                    html_forth += '<option value="0'+i+':30:00">0'+i+':30:00';
                }
            }

            $("#start_time").append(html_forth);
            $("#start_time").fadeIn();
            $("#end_time").append(html_forth);
            $("#end_time").fadeIn();
            $("#bus_desc").fadeIn();
            break;
        case "walking":
            $("#alternatives").append(html_first);
            $("#alternatives").fadeIn();
            $("#avoid").append(html_third);
            $("#avoid").fadeIn();
            break;
        default:
            return;
    }
}

</script>
</head>
<body onload="initialize()">
<select id="typeway" style="width: 30%;" >
    <option value="driving" selected>驾车
    <option value="bicycling">骑行
    <option value="walking">步行
    <option value="transit">公交
</select>

<select id = 'alternatives' style = "display:none">
</select>
<span style="display: none" id = "avoid">
</span>
<span id = "bus_desc" style="display: none">公交车运行时间：</span>
<select id = 'start_time' style = "display: none">
</select>
<select id = 'end_time' style = "display: none">
</select>

输入起点位置:<input type = "text" name = "start" id = "start"value = "长沙 火车站" >
输入目的地:<input type = "text" name = "end" id = "end" value = "长沙 火车南站" >
<button>搜路线</button>
<div id="map_canvas" style="width: 100%; height: 800px"></div>
<div id = "div_json"></div>
</body>
</html>

效果图：

 

 

转载于:https://www.cnblogs.com/bin-pureLife/p/4200779.html

google导航接口
生而为人我很抱歉
07-24 457
destination=纬度,经度。origin=纬度,经度。bicycling：骑行。transit：公共交通。driving：驾车。walking：步行。
uniapp：谷歌地图，实现地图展示，搜索功能，H5导航
sunluyi的博客
10-26 2866
uniapp实现谷歌地图，地图展示及搜索
GoogleMap 导航
weixin_30666943的博客
12-14 116
http://www.zdoz.net/ditu.html?startLat=23.1212&startLng=113.1212&endLat=23.1111&endLng=113.2323 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...
android 端 google map v2的定位与导航
hujiameihuxu的专栏
08-11 2726
近来，在关注安卓手机上的GoogleMap应用的开发，但是目前官方API版本网页版已经升级到V3版，而对于Android的支持也已经升级到V2版本，虽然Google说继续对V1版提供服务，但是不再提供API Key的申请。 V2版本与V1版本有较大的区别，国内的一些博客暂时没有找到对于新版本开发的介绍，于是开始自己折腾这些东西，由于对Android还不是特别熟悉，于是持续了大概半个月的时间，
根据地址，调用谷歌地图的导航
weixin_34418883的博客
03-03 446
这几天需要做一个地图的导航，根据商家的地址解析成经纬度，然后利用导航带用户去。 可以分为一下三步： 第一步：用户点击页面上的带我去按钮： 第二步：地图上显示出商家的位置 第三步：点击到这里去，根据地图默认获取的用户位置为起点，商家的位置为终点，弹出路线图 代码实现如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Tr...
Google Map API使用详解（十四）——使用Google Map提供的默认控件
gyy823的专栏
05-11 1055
地图上的控件一般是指悬浮在地图上、不随地图移动的图片、按钮等等DOM元素，可以用来控制地图、帮助用户和地图交互、显示地图的特定信息和状态。 在谷歌地图主页上，有可以控制地图缩放的控件、有切换地图类型的控件、有显示缩略图的控件等等。这些控件在地图API里也都是默认提供的，所以，你可以在你的地图上加上这些控件，并且可以根据你的需要随意调整地图控件的位置、改变控件的外观，就像我在右边的地图上把缩放控件
实现谷歌地图定位、搜索与点击位置坐标获取的详细指南
weixin_29301059的博客
03-11 1474
本文还有配套的精品资源，点击获取 简介：本文介绍如何利用谷歌地图API进行地图定位、搜索和获取用户点击的坐标位置。通过讲解如何在网页中引入谷歌地图API的JavaScript库，初始化地图实例，设置搜索自动完成功能以及监听地图点击事件，读者可以学会使用API实现地图的交互功能。 1. 谷歌地图API的引入和地图实例初始化 在本章中，我们将深入探讨如何有效地引...
实现谷歌地图功能的地图接口使用范例
为了实现类似于Google地图这样的功能，我们需要了解并掌握一系列的技术知识点和操作流程。首先，我们会从基础开始，然后逐步深入到具体的实现方法和技术细节。 ### 基础知识点 1. **地图服务提供商** - Google ...
Android谷歌地图导航功能实现教程
Google Maps API 是一系列的编程接口，允许开发者将Google地图功能集成到自己的网页和应用中。对于Android应用，Google提供了一个专门的SDK，即Google Maps Android API，允许开发者在应用中嵌入地图，添加标记...
地图接口使用范例实现像google地图一样的功能
06-03
在IT行业中，地图接口是开发地图相关应用的关键技术，它允许开发者通过调用API来实现地图展示、定位、导航等功能。本示例旨在教你如何利用地图接口，模仿Google地图的功能，打造自己的地图应用。以下是一些核心知识...
android 开源库osmdroid绘制点线面（比例尺，缩小放大，导航图标等）
04-26
android 开源库osmdroid绘制点线面（比例尺，缩小放大，导航图标等）。常用的基本用法都有，以及之前写加载离线地图也在这个项目。 我的博客地址：http://blog.youkuaiyun.com/qq_16064871。
HTML5 google地图js代码
11-21
很小很实用的地图插件,直接放到页面就可以使用，太完美了
Google Map Api 谷歌地图接口整理
热门推荐
钟爱技术
01-17 1万+
Google Map Api 谷歌地图接口整理 一：基本知识：  1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥，需要注重一下两点：     1.假如使用 API 的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了。     2.API 密钥只对网站目录或者域有效。对不同域的网页，需要用这些域分别注册不同的密钥 2.页面引用jav
Android应用内调用百度，高德，谷歌地图导航
杨炎飞的博客
05-30 4192
最近项目中有个调用百度地图导航的需求，虽然网上一找一堆，还是觉得自己记录一下比较方便。1.百度导航//开启百度导航 public void startNavi() { //百度地图,从起点是LatLng ll_location = new LatLng("你的纬度latitude","你的经度longitude"); //终点是LatLng ll = new LatLng("你的纬...
在js或者App中，调起第三方地图产品（URI API）的汇总
沧海龙腾LV的博客
03-29 1万+
URI API是为开发者提供直接调起第三方地图产品（Web地图、地图手机客户端）以满足特定业务场景下应用需求的程序接口，开发者只需按照接口规范构造一条标准的URI，便可在PC和移动端浏览器或移动开发应用中调起第三方地图产品，进行地图展示和检索、线路查询、导航等功能，无需进行复杂的地图功能开发。一、百度地图URI API地图调起API，官方连接地址：http://lbsyun.baidu.com/i...
js调用谷歌地图
ruirui
11-16 6298
js调用谷歌地图 src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js">>     http://ditu.google.com/maps/api/js?sensor=true">>         var geocoder;      var map;      function ini
js谷歌地图
YaToue
12-26 510
<html> <head> <script src="https://maps.googleapis.com/maps/api/js?key="> </script> <script> var myCenter = new google.maps.LatLng(39.839472,116.288262); //模拟数...
electron进程间通信- 从渲染进程到主进程
最新发布
唐璜Taro的博客
08-13 1068
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值