百度地图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 实例 自动提示 并计算两地的行驶距离的更多相关文章

  1. 百度地图API 级别自动缩放

    今天做一个基于百度地图API的小项目 查了很长时间apid都没有找到地图呈现出来的时候地图按坐标的多少自动缩放显示的等级比例,特此记录笔记!var points = [point1, point2,p ...

  2. 百度地图api实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx ...

  3. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  4. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  5. 【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离

    原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...

  6. 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 百度地图API 地图圈区域并计算坐标点是否在区域内

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  9. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

随机推荐

  1. js加密php解密（CryptoJS）碰到的坑

    今天做了一个功能,需要js传密码到php文件,对js密码 进行判断,为想为这个传输过程进行解密,参考了网上的一个方法(这个方法我只是使用了,并没有太深了解0.0) 首先要引入3个js文件 (在网上可搜 ...

  2. python新动态执行 文件头标识 禁止断言

    1.exec “python语句” 2. 3.禁止断言

  3. 170831-关于JdbcTemplate声明式事务-操作步骤-例子

    创建一个动态web工程 加入jar包 3.创建一份jdbc.properties文件 4.在spring配置文件中配置数据源 5.测试数据源: 6.配置jdbcTemplate: 7.创建Dao类 & ...

  4. uva live 7637 Balanced String （贪心）

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  5. Day3 02判定两个对象的引用是否相同

    C#中类型分为值类型和引用类型 清楚了他俩的区别,像验证下,如果在C++中,就可以通过指针直接看地址,但是C#中,找了一会儿没找到方法(主要是我技术比较菜). 不过,用根基类的ReferenceEqu ...

  6. Prototype js library

    Prototype An object-oriented JavaScript framework Prototype is a JavaScript framework that aims to e ...

  7. navigation ObtacleCostFunction源码分析

    ObtacleCostFunction 定义了一个ObstacleCostFunction类,继承自Trajectory类,Trajectory类有8个类参 总共有8个类参 double xv_,yv ...

  8. ConcurrentLinkedQueue 源码分析

    ConcurrentLinkedQueue ConcurrentLinkedQueue 能解决什么问题?什么时候使用 ConcurrentLinkedQueue? 1)ConcurrentLinked ...

  9. MongoDB学习【一】—MongoDB简介和安装

    一.MongoDB简介 1.MongoDB是什么 MongoDB是一款强大.灵活.且易于扩展的通用型数据库,MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的 ...

  10. Linux基础—saltstack运维工具学习

    一.saltstack简介 1.saltstack是什么 系统管理员日常会进行大量的重复性操作,例如安装软件,修改配置文件,创建用户,批量执行命令等,如果主机数量庞大,单靠人工维护实在让人难以忍受. ...