绘制轨迹设置途经点，并添加信息窗口

最新推荐文章于 2024-03-15 11:39:43 发布

up阳光正好

最新推荐文章于 2024-03-15 11:39:43 发布

阅读量1k

点赞数 3

分类专栏：前端文章标签： api 百度地图 javascript

本文链接：https://blog.csdn.net/zjuwwj/article/details/53492596

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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); //开启信息窗口
    };