调用百度地图API,实现对指定位置进行标注

Summer'Sun

于 2024-07-09 14:42:59 发布

阅读量645

点赞数 3

文章标签：百度贴图

本文链接：https://blog.csdn.net/weixin_50944977/article/details/140295373

版权

效果图：
实现效果
需要前往百度地图开发者平台申请API，获得AK秘钥
附代码：

<!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%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #allmap {position:absolute;left:0px;width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.5&ak=Q###此处为百度地图AK###"></script>
    <title>车辆运行轨迹测试</title>
    <!-- <script src="http://c.cnzz.com/core.php"></script> --> <!-- 如果不需要统计代码，可以注释掉 -->
</head>
<body>
<div id="allmap"></div>

<script type="text/javascript">
  var list = [
        // 起点  经纬度坐标
        {Long: 128.4, Lat: 31.8, type: 'start'},
        // 途经点
        {Long: 128.4, Lat: 32.8, type: 'waypoint'},
  

        // ... 其他途经点
        // 终点
        {Long: 129.0 , Lat: 34.3, type: 'end'}
    ];
    var listLength = list.length;

    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(list[0].Long,list[0].Lat), 15);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    // setTimeout(drawIcon,500); /* 注释掉，除非你定义了drawIcon函数 */

    var carMk;
    var myBeginIcon = new BMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});
    var myEndIcon = new BMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});

    var waypointMarkers = []; // 用于存储途经点标记的数组

    // 绘制起点标记
    var carMk2 = new BMap.Marker(new BMap.Point(list[0].Long, list[0].Lat), {icon: myBeginIcon});
    map.addOverlay(carMk2);

    // 绘制终点标记
    var carMk = new BMap.Marker(new BMap.Point(list[listLength - 1].Long, list[listLength - 1].Lat), {icon: myEndIcon});
    map.addOverlay(carMk);

    // 绘制途经点标记
    for (var i = 1; i < listLength - 1; i++) { // 跳过起点和终点
        if (list[i].type === 'waypoint') {
            var waypointMarker = new BMap.Marker(new BMap.Point(list[i].Long, list[i].Lat));
            map.addOverlay(waypointMarker);
            waypointMarkers.push(waypointMarker); // 将标记添加到数组中
        }
    }

    // 绘制连接线条
    for (var j = 0; j < listLength - 1; j++) {
        drawGreenLine(j, list[j], list[j + 1]);
    }

    // 修改后的drawGreenLine函数，可以处理起点、途经点和终点
    function drawGreenLine(index, startPoint, endPoint) {
        var polyline = new BMap.Polyline([
            new BMap.Point(startPoint.Long, startPoint.Lat),
            new BMap.Point(endPoint.Long, endPoint.Lat)
        ], {
            strokeColor: "blue",
            strokeWeight: 4,
            strokeOpacity: 1
        });
        map.addOverlay(polyline);
    }
</script>
</body>
</html>