当前位置：首页 > wzjs >正文

免费网站建设步骤手把手教你优化网站

wzjs 2025/9/5 8:53:12

免费网站建设步骤,手把手教你优化网站,南宁营销网站建设,icp对网站内容07、带高度的点纹理贴图在百度地图的 BMapGL API 中，除了可以使用 Marker3D 绘制带有高度的点标记外，你还可以为这些标记添加纹理贴纸（例如图像或自定义图标）。这样可以使标记更加生动，适用于如建筑物、标志性位置等…

07、带高度的点纹理贴图

在百度地图的 BMapGL API 中，除了可以使用 Marker3D 绘制带有高度的点标记外，你还可以为这些标记添加 纹理贴纸（例如图像或自定义图标）。这样可以使标记更加生动，适用于如建筑物、标志性位置等有具体图形表示的场景。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>带高度的点纹理贴图</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><style>body,html,#container {overflow: hidden;width: 100%;height: 90%;margin: 0;font-family: "微软雅黑",serif;}</style><script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4LNKXPO0VCgfpZstdvYkRozvWh6JFEgQ"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>const map = new BMapGL.Map('container');const point = new BMapGL.Point(116.443, 39.935);map.centerAndZoom(point, 13);map.enableScrollWheelZoom();map.setTilt(70);const citys = [{name: '北京大学',img: '/jsdemo/img/beida.png'}, {name: '北京交通大学',img: '/jsdemo/img/beijiao.png'}, {name: '北京工业大学',img: '/jsdemo/img/beigong.png'}, {name: '北京邮电大学',img: '/jsdemo/img/beiyou.png'}];const cityGeo = new BMapGL.Geocoder();for (let i = 0; i < citys.length; i++) {cityGeo.getPoint(citys[i].name, function (point) { // 地址解析获取对应经纬度const pt = new BMapGL.Point(point.lng, point.lat);const icon = new BMapGL.Icon(citys[i].img, new BMapGL.Size(40, 40));const marker = new BMapGL.Marker3D(pt, Math.round(Math.random()) * 6000, {size: 80,icon: icon});map.addOverlay(marker);});}
</script>