百度地图api 实例自动提示并计算两地的行驶距离

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body,

        html {

            width: 100%;

            height: 100%;

            margin: 0;

            font-family: "微软雅黑";

            font-size: 14px;

        }

        #l-map {

            height: 500px;

            width: 100%;

        }

        #r-result {

            width: 100%;

        }

    </style>

    <script type="text/javascript"

        src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

    <title>关键字输入提示词条</title>

</head>

<body>

    <div id="l-map"></div>

    <div id="r-result">起始位置:<input type="text" id="suggestId" size="20" value="起点" style="width:350px;" /></div>

    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

    <div style="height:20px;"></div>

    <div id="r-result2">终点位置:<input type="text" id="suggestId2" size="20" value="终点" style="width:350px;" /></div>

    <div id="searchResultPanel2" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

    <div style="color:red;">根据输入提示,从下拉框中选择所需要的地址,如果没有你所需要的地址,则选择离你最近的下拉框中的地址</div>

    <div id="result" style="color:black;padding:10px"></div>

    <div id="dist" style="color:blue;padding:10px"></div>

    <div id="output" style="color:green;padding:10px"></div>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

    function G(id) {

        return document.getElementById(id);

    }

    var map = new BMap.Map("l-map");

    map.centerAndZoom("武汉", 12);                   // 初始化地图,设置城市和地图级别。

    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用

    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    var startaddPonit;

    var endaddPonit;

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象

        {

            "input": "suggestId"

            , "location": map

        });

    var ac2 = new BMap.Autocomplete(    //建立一个自动完成的对象

        {

            "input": "suggestId2"

            , "location": map

        });

    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件

        var str = "";

        var _value = e.fromitem.value;

        var value = "";

        if (e.fromitem.index > -1) {

            value = _value.province + _value.city + _value.district + _value.street + _value.business;

        }

        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";

        if (e.toitem.index > -1) {

            _value = e.toitem.value;

            value = _value.province + _value.city + _value.district + _value.street + _value.business;

        }

        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

        G("searchResultPanel").innerHTML = str;

    });

    ac2.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件

        var str = "";

        var _value = e.fromitem.value;

        var value = "";

        if (e.fromitem.index > -1) {

            value = _value.province + _value.city + _value.district + _value.street + _value.business;

        }

        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";

        if (e.toitem.index > -1) {

            _value = e.toitem.value;

            value = _value.province + _value.city + _value.district + _value.street + _value.business;

        }

        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

        G("searchResultPanel2").innerHTML = str;

    });

    var myValue;

    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件

        var _value = e.item.value;

        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        //setPlace();

    });

    var myValue2;

    ac2.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件

        var _value = e.item.value;

        myValue2 = _value.province + _value.city + _value.district + _value.street + _value.business;

        G("searchResultPanel2").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue2;

        //setPlace2();

        getPoint();

        //getduration();

    });

    function setPlace() {

        map.clearOverlays();    //清除地图上所有覆盖物

        function myFun() {

            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

            startaddPonit = pp;

            map.centerAndZoom(pp, 18);

            map.addOverlay(new BMap.Marker(pp));    //添加标注

        }

        var local = new BMap.LocalSearch(map, { //智能搜索

            onSearchComplete: myFun

        });

        local.search(myValue);

    }

    function geocodeSearch(add, i) {

    }

    function getPoint() {

        var myGeo = new BMap.Geocoder();

        var points = [];

        myGeo.getPoint(myValue, function (point) {

            if (point) {

                document.getElementById("result").innerHTML += myValue + ":" + point.lng + "," + point.lat + "</br>";

                var address = new BMap.Point(point.lng, point.lat);

                var marker = new BMap.Marker(address);

                map.addOverlay(marker);

                marker.setLabel(new BMap.Label("1:" + myValue, { offset: new BMap.Size(20, -10) }));

                points[0] = address;

                //console.log(address);

                //console.log(i);

                myGeo.getPoint(myValue2, function (point) {

                    if (point) {

                        document.getElementById("result").innerHTML += myValue2 + ":" + point.lng + "," + point.lat + "</br>";

                        var address = new BMap.Point(point.lng, point.lat);

                        var marker = new BMap.Marker(address);

                        points[1] = address;

                        map.addOverlay(marker);

                        marker.setLabel(new BMap.Label("2:" + myValue2, { offset: new BMap.Size(20, -10) }));

                        console.log(points);

                        getduration(points[0], points[1]);

                    }

                }, "青岛市");

            }

        }, "青岛市");

    }

    function getdist(pointA, pointB) {

        //var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区

        //var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区

        //alert((map.getDistance(pointA,pointB)));  //获取两点距离,保留小数点后两位

        G("dist").innerHTML = "直线距离" + map.getDistance(pointA, pointB) + "米";

        var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 });  //定义折线

        map.addOverlay(polyline);     //添加折线到地图上

    }

    function getduration(point1, point2) {

        //var startdm = G("suggestId").innerHTML;

        //var enddm = G("suggestId2").innerHTML;

        var output = "驾车需要";

        var searchComplete = function (results) {

            if (transit.getStatus() != BMAP_STATUS_SUCCESS) {

                return;

            }

            var plan = results.getPlan(0);

            output += plan.getDuration(true) + "\n";                //获取时间

            output += "总路程为：";

            output += plan.getDistance(true) + "\n";             //获取距离

            G("output").innerHTML = output;

        }

        var transit = new BMap.DrivingRoute(map, {

            renderOptions: { map: map },

            onSearchComplete: searchComplete,

            onPolylinesSet: function () {

                setTimeout(function () { alert(output) }, "1000");

            }

        });

        transit.search(point1, point2);

    }

</script>

效果图

百度地图api 实例自动提示并计算两地的行驶距离的更多相关文章

百度地图API 级别自动缩放
今天做一个基于百度地图API的小项目查了很长时间apid都没有找到地图呈现出来的时候地图按坐标的多少自动缩放显示的等级比例,特此记录笔记!var points = [point1, point2,p ...
百度地图api实例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx ...
HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离
原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...
百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
百度地图API 地图圈区域并计算坐标点是否在区域内
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]
相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...
百度地图API调用实例之地址标注与位置显示
之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

随机推荐

android 7.0适配（总结）
file_paths.xml <?xml version="1.0" encoding="utf-8"?><paths xmlns:andro ...
Python pdfkit
序言住在地下室的人,依然有仰望星空的权利. pdfkit python使用pdfkit中,如果使用pdfkit.fromurl 或者pdfkit.fromstring等,就会出现上述错误.而且如果你 ...
改变icon方向
例你想要箭头朝上的图标而你只有箭头朝下的图标,不幸的是你又没有朝上的图标,那就旋转图标. <i class="icon iconfont _icon-iconfontfanhui4&q ...
20180829-Java多线程编程
Java 多线程编程 Java给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分. 程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特 ...
Sonys TRC save data plolicy
帖子地址:https://forums.unrealengine.com/showthread.php?130820-Sonys-TRC-save-data-plolicy we had severa ...
在centos上配置环境
1. 安装wget [root@localhost ~]# yum -y install wget 2. 在oneinstack官网配置安装环境 wget http://mirrors.lin ...
Kaggle 房价预测问题参考资料
作者的 Kaggle 主页:https://www.kaggle.com/pavansanagapati Tutorial - Housing Prices Model Prediction http ...
2019前端面试题汇总（vue）
毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道路上我只能独自摸索.老板也只会画饼充饥,前途一片迷茫看不到任何希望.于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该 ...
MK66FN2M0VLQ18
NXP Kinetis K66: 180MHz Cortex-M4F MCU, 2MB Flash, 256KB SRAM, Dual USBs (FS + HS), Ethernet, 144-LQ ...
CMD模块打包部署总结
目前线上系统利用Seajs做模板化,但是没有对js和css进行打包,在这次简历搜索优化项目里我尝试对gulp插件对Seajs模块打包. 安装gulp和相关插件 npm install -g gulp ...

百度地图api 实例 自动提示 并计算两地的行驶距离

百度地图api 实例 自动提示 并计算两地的行驶距离

效果图

百度地图api 实例 自动提示 并计算两地的行驶距离的更多相关文章

随机推荐

热门专题

百度地图api 实例自动提示并计算两地的行驶距离

百度地图api 实例自动提示并计算两地的行驶距离

百度地图api 实例自动提示并计算两地的行驶距离的更多相关文章