1. 使用的工具

百度地图API

2. 需求

  • 绘制路径，包含起点、终点、途经点；
  • 当鼠标悬浮在（mouseover）起点、终点、途经点时，显示信息窗口；
  • 鼠标离开时（mouseout），隐藏信息窗口。

这里写图片描述

3. 实现原理

  • 首先根据百度api提供的现成的接口绘制轨迹；
    • 包含起点、终点、途经点
    • 根据这些点绘制轨迹
  • 给图中的点添加覆盖物；
  • 为覆盖物添加信息窗口；

4. 实现步骤

  • 基本模型：先将起点、终点、途经点画出来

效果如下：

这里写图片描述

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,#allmap {
        height: 100%;
        overflow: hidden;
        margin:0;
        font-family:"微软雅黑";
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY"></script>
    <title>设置路线途经点</title>  
    <script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript">
    hQGHuMEAyLn('[id="bb9c190068b8405587e5006f905e790c"]');</script>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
</html>

js代码如下：

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 18);
    map.enableScrollWheelZoom(true);
    var myPoints = [
        [new BMap.Point(116.35846,39.990716),"描述：这是起点"],
        [new BMap.Point(116.398449,39.989302),"描述：这是途经点1"],
        [new BMap.Point(116.408843,39.995366),"描述：这是途经点2"],
        [new BMap.Point(116.430837,39.987962),"描述：这是途经点3"],
        [new BMap.Point(116.478853,39.980684),"描述：这是终点"]
    ]

    var points = [];
    for(var i = 0; i < myPoints.length; i++) {
        points.push(myPoints[i][0]);
    }

    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    driving.search(points[0], points[points.length-1],{waypoints:points.slice(1,points.length-1)});//waypoints表示途经点
</script>

效果如下：

这里写图片描述

代码如下：

for(var i = 0;i < myPoints.length; i++){
        var myPoint = myPoints[i][0];
        var content = myPoints[i][1];

        var myIcon = new BMap.Icon("https://img-blog.csdn.net/20161128100735335", new BMap.Size(20, 20), {
                    anchor : new BMap.Size(12, 30), // 中心点设置
                });

        var marker = new BMap.Marker(myPoint, {icon : myIcon}); // 创建标注
        marker.setZIndex(999);
        map.addOverlay(marker);               // 将标注添加到地图中
    }
  • 创建信息窗口，并给每个点添加 mouseover 和 mouseout 事件

效果如下：

这里写图片描述

代码如下：

/*设置信息窗口*/
var opts = {
        width : 50,     // 信息窗口宽度
        height: 10,     // 信息窗口高度
        backgroundColor: "#ccc",
        title : "信息窗口" , // 信息窗口标题
        enableMessage:true//设置允许信息窗发送短息
    };

    for(var i = 0;i < myPoints.length; i++){
        var myPoint = myPoints[i][0];
        var content = myPoints[i][1];

        var myIcon = new BMap.Icon("https://img-blog.csdn.net/20161128100735335", new BMap.Size(20, 20), {
                    anchor : new BMap.Size(12, 30), // 中心点设置
                });

        var marker = new BMap.Marker(myPoint, {icon : myIcon}); // 创建标注
        marker.setZIndex(999);
        map.addOverlay(marker);               // 将标注添加到地图中

        /*添加事件*/
        addMouseoverHandler(content,marker); 
        addMouseoutHandler(content,marker);
    }

    function addMouseoverHandler(content,marker){
        marker.addEventListener("mouseover",function(e){
            openInfo(content,e);
        });
    };

    function addMouseoutHandler(content,marker){
        marker.addEventListener("mouseout",function(e){
            map.closeInfoWindow();
        });
    };

    /*打开信息窗口的处理函数*/
    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    };

实际设计中，只要把覆盖物的枚红色点替换成透明的点即可，最终结果图如下：

这里写图片描述

5. 注意事项：

途经的点，百度 API最多只提供了10个，读者在开发时，要根据实际情况选择，感谢您的阅读。

百度地图API途径点

这里写图片描述

# javascript
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区