<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
 <script type="text/javascript">
   // GL版命名空间为BMapGL
   // 按住鼠标右键，修改倾斜角和角度
   var map = new BMapGL.Map("allmap");    // 创建Map实例
   map.centerAndZoom(new BMapGL.Point(87.617733, 43.792818), 11);  // 初始化地图,设置中心点坐标和地图级别
   map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
   map.setMapStyleV2({
     styleId: ‘你的样式ID'
   });
   <% MaterialReserf.all.order(created_at: :desc).limit(30).each do |material_reserf| %>
     (function() {
       var point = new BMapGL.Point(<%= material_reserf.longitude %>, <%= material_reserf.latitude %>);
       map.centerAndZoom(point, 15);
 
       // 创建点标记
       var marker = new BMapGL.Marker(point);
       map.addOverlay(marker);
 
       // 创建信息窗口
       var opts = {
         width: 300,
         height: 233,
         title: "<%= material_reserf.warehouse_location %>", // 信息窗口标题
       };
       var infoWindow = new BMapGL.InfoWindow("物资名称：<%= material_reserf.goods_type %></br>储备数量：<%= material_reserf.storage_apacity %></br>\
         联系人：<%= material_reserf.person_in_charge %><br/>联系电话：<%= material_reserf.tel %><br/>企业类型：<%= material_reserf.enterprise_category %><br/>\
           <a href='/material_reserves/<%= material_reserf.id %>' style='text-decoration: none; color: #01c2ff; font-size: 17px; text-align: center; margin: 15px 40px; width: 180px;\
           height: 40px; display: block; background: #0b1c32; border: 1px solid #3181b9; border-radius: 30px;line-height: 195%;'>点击查看物资报表 \
           <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-right-fill' viewBox='0 0 16 16'>\
           <path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/> </svg></a>", opts);
 
       // 点标记添加点击事件
       marker.addEventListener('click', function () {
         map.openInfoWindow(infoWindow, point); // 开启信息窗口
       });
     })();
   <% end %>

   // 添加固定的点标记和弹窗
   (function() {
     var fixedPoint = new BMapGL.Point(87.617730, 43.692813);
     var fixedMarker = new BMapGL.Marker(fixedPoint);
     map.addOverlay(fixedMarker);
     var fixedOpts = {
       width: 300,
       height: 233,
       title: "新疆新联农产品有限公司001号储备仓<br/>", // 信息窗口标题
       enableCloseOnClick: false
    };
  var fixedInfoWindow = new BMapGL.InfoWindow("物资名称：面粉</br>储备数量：3000吨</br>联系人：周利民<br/>联系电话：13682509276<br/> 企业类型：生产加工企业<br/>\
       <a href='/material_reserves/2' style='text-decoration: none; color: #01c2ff; font-size: 17px; text-align: center; margin: 15px 40px; width: 180px; height: 40px; display: block;\
       background: #0b1c32; border: 1px solid #3181b9; border-radius: 30px;line-height: 195%;'>点击查看物资报表\
       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-right-fill' viewBox='0 0 16 16'>\
       <path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/> </svg></a>", fixedOpts);
     map.openInfoWindow(fixedInfoWindow, fixedPoint);
   })();
</script>

var map = new BMapGL.Map("allmap");    // 创建Map实例
var maxZoom = 18; // 设置最大缩放级别，用于限制整个地图的最大缩放级别
var minZoom = 11; // 设置最小缩放级别，即乌鲁木齐市地图的缩放级别
map.centerAndZoom(new BMapGL.Point(87.617733, 43.792818), 11);  // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放

var listener = function () {
    var currentZoom = map.getZoom();
    if (currentZoom < minZoom) {
        map.setZoom(minZoom);
    } else if (currentZoom > maxZoom) {
        map.setZoom(maxZoom);
    }
};

map.addEventListener("zoomend", listener);
map.addEventListener("moveend", listener);

 var map = new BMapGL.Map("allmap");    // 创建Map实例
 var maxZoom = 18; // 设置最大缩放级别，即乌鲁木齐市地图的缩放级别
 var minZoom = 11; // 设置最小缩放级别，即乌鲁木齐市地图的缩放级别
 map.centerAndZoom(new BMapGL.Point(87.617733, 43.792818), 11);  // 初始化地图,设置中心点坐标和地图级别
 map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
 
 var listener = function () {
    var currentZoom = map.getZoom();
       if (currentZoom < minZoom) {
           map.setZoom(minZoom);
       } else if (currentZoom > maxZoom) {
           map.setZoom(maxZoom);
       }
   };
 
   map.addEventListener("zoomend", listener);
   map.addEventListener("moveend", listener);
   map.setMapStyleV2({
     styleId: 'd76202f4d8bb950ac47426d0a697112f'
   });
   <% MaterialReserf.all.order(created_at: :desc).limit(30).each do |material_reserf| %>

   ……

   ……