百度地图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详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

随机推荐

CSS盒子模型中的Padding属性
CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见.如果想调整盒子的大小可以调整内容区,内边距,边框. CSS padding 属性定义元素的内边距 ...
Bugku 杂项宽带信息泄露
宽带信息泄露 flag是宽带用户名下载文件后用RouterPassView打开,搜索username即可
Java——类的继承、访问控制
[继承] <1>Java只支持单继承,不支持多继承. <2>继承父类的私有成员变量,只有所有权,没有使用权. [继承中的构造方法]
网页分页page
public class PageBean { private int page; // 第几页 private int pageSize; // 每页记录数 private int start; / ...
Java 有关类字段的初始化
实例代码 package text; public class MethodOverload { /** * @param args */ public static void main(String ...
oracle触发器update本表数据
功能: 1. 允许/限制对表的修改 2. 自动生成派生列,比如自增字段 3. 强制数据一致性 4. 提供审计和日志记录 5. 防止无效的事务处理 6. 启用复杂的业务逻辑开始 create trig ...
oracle各服务说明及cmd启动启动命令
成功安装Oracle 11g后,共有7个服务,一.这七个服务的含义分别为:1. Oracle ORCL VSS Writer Service:Oracle卷映射拷贝写入服务,VSS(Volume Sh ...
Mac sublime安装package controller
https://packagecontrol.io/installation#st2 链接被墙了这个. 我拿来放在这里. The simplest method of installation is ...
vue引入静态js文件
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...
Flask框架—flask_sqlalchemy组件使用
一.flask_sqlalchemy组件我们之前学过SQLAlchemy,一个独立的数据库关系对象映射,其实在flask中也有官方认可的第三方SQLAlchemy组件,用于处理flask中对象关系映 ...

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

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

效果图

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

随机推荐

热门专题

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

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

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