百度地图JavaScript API添加自定义Marker

作者：时间：2023-06-08阅读数：人阅读

百度地图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>

效果如下

在这里插入图片描述