百度地圖覆蓋物使用本地圖標Marker

js方法

// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
//圖標
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon(require('./test.png'), new BMap.Size(32,32));
var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 創建標註
map.addOverlay(marker2); 

圖片相對路徑爲

注意使用require加載圖片：

var myIcon = new BMap.Icon(require(’./test.png’), new BMap.Size(32,32));

若不使用require則加載不出圖片

var myIcon = new BMap.Icon(’./test.png’, new BMap.Size(32,32));

vue寫法

<!-- 設置起始點圖標 -->
 <bm-marker v-for="(startitem,startindex) of startPoint" :key="startindex"+'start' :position="{lng: startitem.lng, lat: startitem.lat}"
            :icon="{url: startitem.icon, size: {width: 32, height: 32}}">
 </bm-marker>

後臺返回數據格式如下：

拼接數據

   console.log('靜態全軌跡======',obj.data);
   if (obj.code == 200) {
     _this.listTrajectoryData= obj.data;
     if(obj.data.length > 0) {
       for (let index = 0; index < obj.data.length; index++) {
         const element = obj.data[index];
          _this.startPoint.push({
             lng: element[0].lng,
             lat: element[0].lat,
             icon: './static/image/qidian.png',
          })
           _this.endPoint.push({
             lng: element[element.length-1].lng,
             lat: element[element.length-1].lat,
             icon: './static/image/zhongdian.png',
          })
       }
     }
   }