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

最新推荐文章于 2024-05-18 15:32:42 发布

Prejudices

最新推荐文章于 2024-05-18 15:32:42 发布

阅读量3.8k

点赞数 3

分类专栏：开发文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Solititude/article/details/130685546

版权

开发专栏收录该内容

56 篇文章 2 订阅

订阅专栏

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

效果如下

在这里插入图片描述

Prejudices

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
百度地图JavaScript API添加自定义Marker

官网指导添加自定义Marker实际使用中发现无法显示图标，找了一些博客百度地图开发自定义图标无法显示的问题百度地图自定义图标不显示问题解决方案关于百度地图开放平台api覆盖物“自定义Marker图标”不能正常显示的解决方案百度电子地图自定义marker图标百度地图api设置点的自定义图标不显示图片路径为本地路径时，需要调用require()icon内的size大小应与图标原大小必须一致本地静态路径的图片无法显示，url图片连接能够显示经测试确实是本地静态路径图片无法显示，需要用url。
复制链接

扫一扫