百度地图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. CodeForces 1187D Subarray Sorting

    Problem You are given an array \(a_1\),\(a_2\),-,\(a_n\) and an array \(b_1\),\(b_2\),-,\(b_n\). For ...

  2. 【bzoj2724】[Violet 6]蒲公英

    *题目描述: *输入: 修正一下 l = (l_0 + x - 1) mod n + 1, r = (r_0 + x - 1) mod n + 1 *输出: *样例输入: 6 3 1 2 3 2 1 ...

  3. 在 mac 系统上安装 python 的 MySQLdb 模块

    在 mac 系统上安装 python 的 MySQLdb 模块 特别说明:本文主要参考了Mac系统怎么安装MySQLdb(MySQL-Python) 第 1 步:下载 MySQL-python-1.2 ...

  4. php部署调优

    转自Laravel学院,  作者:学院君 最近刚好看到一些php.ini优化问题处理. 很多文章都是把配置全部翻译. (内容翻译太多和流程结构写的不是很清晰,看起来也头大.但是建议全部内容看几遍了解一 ...

  5. sed的一些应用

    1. sed 使用变量进行替换,注意使用参数 r 时,需要放在参数 i 的前面 下面这个例子是用2.txt中的版本号替换docker-compose.yml中的版本号,其中变量UPGRADE_NAME ...

  6. 阿里云配置通用服务的坑 ssh: connect to host 47.103.101.102 port 22: Connection refused

    1.~ wjw$ ssh root@47.103.101.102 ssh: connect to host 47.103.101.102 port 22: Connection refused ssh ...

  7. Java中的BigDecimal类和int和Integer总结

    前言 我们都知道浮点型变量在进行计算的时候会出现丢失精度的问题.如下一段代码: System.out.println(0.05 + 0.01); System.out.println(1.0 - 0. ...

  8. JS new date在IOS出现的问题

    实例代码: input = input.replace(/\-/g, "/");//横杠的时间不能被识别,所以要替换程斜杠 let time = new Date(input); ...

  9. Vue知识整理3：v-once的使用

    v-once可以使得数据绑定只绑定一次,后期不会再改变,如下图所示:

  10. RFC、EMCA-262、TC-39等名词

    请求意见稿(英语:Request For Comments,缩写:RFC)是一系列备忘录. The RFC series contains technical and organizational d ...