百度地图JavaScript API添加自定义Marker
官网指导添加自定义Marker
实际使用中发现无法显示图标，找了一些博客
百度地图开发自定义图标无法显示的问题
百度地图自定义图标不显示问题解决方案
关于百度地图开放平台api覆盖物“自定义Marker图标”不能正常显示的解决方案
百度电子地图自定义marker图标
百度地图api设置点的自定义图标不显示
总结下来可能是下面的问题：
- 图片路径为本地路径时，需要调用
require() icon内的size大小应与图标原大小必须一致- 本地静态路径的图片无法显示，
url图片连接能够显示
经测试确实是本地静态路径图片无法显示，需要用url图片链接，可以在下面的网站获取
图标、插图、照片、音乐和设计工具
<img src="https://img.icons8.com/office/40/null/car.png"/>
marker.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加Marker </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOZpUSe1LVaCoKEUqGesVdKaRs1AbK9o"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
// 创建定位控件
var locationControl = new BMapGL.LocationControl({
// 控件的停靠位置（可选，默认左上角）
anchor: BMAP_ANCHOR_TOP_RIGHT,
// 控件基于停靠位置的偏移量（可选）
offset: new BMapGL.Size(20, 20)
});
// 将控件添加到地图上
map.addControl(locationControl);
// 添加定位事件
locationControl.addEventListener("locationSuccess", function(e){
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为：" + address);
});
// var myIcon = new BMapGL.Icon(require('./a-40.png'), new BMapGL.size(48, 48));
var myIcon = new BMapGL.Icon("https://img.icons8.com/office/40/null/car.png", new BMapGL.Size(50,50));
var pt = new BMapGL.Point(116.417, 39.909);
var marker = new BMapGL.Marker(pt, {icon: myIcon});
//var marker = new BMapGL.Marker(pt);
map.addOverlay(marker);
var opts = {
width: 200,
height: 100,
title: 'RedWallBot'
};
var info = new String("这是我们完全自主研发的全方位移动机器人哦！");
var infoWindow = new BMapGL.InfoWindow(info, opts);
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, pt);
});
</script>
</body>
</html>
效果如下
