百度地图自定义弹框、标注

最新推荐文章于 2024-08-21 15:01:50 发布

qianghuafeifeifei

最新推荐文章于 2024-08-21 15:01:50 发布

阅读量5k

点赞数

分类专栏：地图

本文链接：https://blog.csdn.net/qianghuafeifeifei/article/details/90026184

版权

本文介绍如何在百度地图上实现自定义的弹框和标注，包括如何替换标注图片，以个性化展示地图信息。

摘要由CSDN通过智能技术生成

自定义地图显示内容（百度地图）、标注图片可以自己替换一下

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=Op2yKY94G2Mv6hhjcF1xXF99UHbwzbF5">
    </script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
   #map_box{
       width: 100%;
       height: 800px;
   }
    </style>
</head>

<body>
<div id="map_box">

</div>
   
</body>
<script>
    let mapdata= [
        {
          point: [116.401394,39.914492],
          CLL: "147",
          JCXXZC: "127",
          JCXXBZC: "20",
          HYCCFZS: "35",
          HYCYCH: "30",
          HYCWCF: "5",
          CBCL: "50",
          type: true
        },
        {
          point: [116.43244,39.910508],
          CLL: "247",
          JCXXZC: "226",
          JCXXBZC: "21",
          HYCCFZS: "45",
          HYCYCH: "35",
          HYCWCF: "10",
          CBCL: "40",
          type: false
        }
      ]
let map = new BMap.Map("map_box", { enableMapClick: false }); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.401394,39.914492), 14); // 初始化地图,设置中心点坐标和地图级别
    map.setMapStyle({
      styleJson: [
        {
          featureType: "poilabel",
          elementType: "all",
          stylers: {
            visibility: "off"
          }
        }
      ]
    });
    //添加地图类型控件
    map