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

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

官网指导添加自定义Marker

实际使用中发现无法显示图标,找了一些博客

百度地图开发自定义图标无法显示的问题

百度地图自定义图标不显示问题解决方案

关于百度地图开放平台api覆盖物“自定义Marker图标”不能正常显示的解决方案

百度电子地图自定义marker图标

百度地图api设置点的自定义图标不显示

总结下来可能是下面的问题:

  1. 图片路径为本地路径时,需要调用require()
  2. icon内的size大小应与图标原大小必须一致
  3. 本地静态路径的图片无法显示,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>

效果如下

在这里插入图片描述

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Prejudices

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值