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

随机推荐

BZOJ 1776: [Usaco2010 Hol]cowpol 奶牛政坛 LCA + 树的直径
Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) ...
区间查询异或最大值——cf1100F,hdu6579
cf1100F是静态区间查询最大值,有离线的解法,我感觉线段树或者莫队应该都能过更优秀的解法可以在线并支持修改,可以解决hdu6579,即依次插入每个数,pos[i][j]表示在插第i个数时第j个基 ...
颜色空间模型与 Opencv中的HSV模型范围
颜色空间总结 RGB.HSV.YUV 什么是颜色 Wiki是这样说的:颜色或色彩是通过眼.脑和我们的生活经验所产生的一种对光的视觉效应.嗯,简单点说,颜色就是人对光的一种感觉,由大脑产生的一种感觉.感 ...
scanf() 与 gets()--转载
scanf( )函数和gets( )函数都可用于输入字符串,但在功能上有区别.若想从键盘上输入字符串"hi hello",则应该使用__gets__函数. gets可以接收空格:而 ...
cf 118B
B. Present from Lena time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
（24）Python实现递归生成或者删除一个文件目录及文件
def removeDir(dirPath): ''' Created by Wu Yongcong 2017-8-18 :param dirPath: :return: ''' if not os. ...
Java实体类之间的映射（一对多关系）
通过栗子,一个人可以有多辆汽车定义人这个类人可以有很多辆汽车,类中车属性用数组 class Person{ private String name; private String phone ...
10.6 Comment Syntax
w https://dev.mysql.com/doc/refman/5.7/en/comments.html MySQL 5.7 Reference Manual / Language Stru ...
10.1 ‘The server's host key is not cached in the registry’
10.1 ‘The server's host key is not cached in the registry’ This error message occurs when PuTTY conn ...
H5 刮图-刮一刮
<!DOCTYPE html><html><head><style>*{margin:0;padding:0} </style></h ...

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

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

效果图

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

随机推荐

热门专题

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

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

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