百度地图轨迹（自定义图标）

最新推荐文章于 2024-02-29 12:00:28 发布

alo_ne

最新推荐文章于 2024-02-29 12:00:28 发布

阅读量1.2k

点赞数 1

分类专栏：百度地图API

本文链接：https://blog.csdn.net/alo_ne/article/details/108844812

版权

百度地图API 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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,
    #allmap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
    }
  </style>
  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  <title>折线上添加方向箭头</title>
</head>

<body>
  <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

  // 创建polyline对象
  var pois = [
    new BMap.Point(116.350658, 39.938285),
    new BMap.Point(116.386446, 39.939281),
    new BMap.Point(116.389034, 39.913828),
    new BMap.Point(116.442501, 39.914603)
  ];
  var polyline = new BMap.Polyline(pois, {
    enableEditing: false,//是否启用线编辑，默认为false
    enableClicking: true,//是否响应点击事件，默认为true
    strokeWeight: '8',//折线的宽度，以像素为单位
    strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
    strokeColor: "#18a45b" //折线颜色
  });

  map.addOverlay(polyline);          //增加折线


  // 编写自定义函数,创建标注
  function addMarker(point) {
    var myIcon = new BMap.Icon("/jsdemo/img/fox.gif", new BMap.Size(300, 157));
    var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
    map.addOverlay(marker);
  }
  // 向地图添加标注
  for (var i = 0; i < pois.length; i++) {

    addMarker(pois[i]);
  }



</script>