百度地图Javascript api --- 标注公司地址

最近在使用百度地图来显示公司地址,虽然是重复的功能,但是发现之前别人写的代码太多余,基于原生的代码,没有框架,总结一下~

1.如果获取百度地图ak

1637217385(1).png 这里我直接用的*,但是可以采纳下面这种方式：

浏览器这里有个点要注意，就是这个Referer白名单，这个比较重要。很多人偷懒直接用了*，也就是所有的域名都可以使用。这有个问题是，如果你本地自己测试倒是没问题，如果要放在生产环境，AK泄露，会被其他人使用，这样会导致额度超出并产生不必要的费用。

我们之前的团队是做法是创建二个应用，一个不限制referer白名单，一个限制成测试和生产环境的域名（当然你也可以将测试和生产环境再做一个区分）。

摘自: 百度地图开发者注册流程(获取AK的方法)

之前我遇到了这样的报错: APP服务被禁用了,可以访问等等~~~~ 一般都是ak没有正确的申请

2.使用

为了重复去利用map相关的东西,我们使用iframe将地图相关的页面嵌套进来

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .map {
      width: 500px;
      height: 400px;
    }
    #mapFrame{
      width: 100%;
      height: 100%;
    }
  </style>
   <div style="color: chocolate;font-size: 24px;">公司地址:</div>
  <div class="map">
    <iframe src="./commonMap.html" frameborder="0" id="mapFrame"></iframe>
  </div>
</head>
<body>
  <script>
    window.onload = function () {
       // 地图标记
      var msg = {
        name: "深圳乐行天下科技有限公司",
        address: "地址：广东省深圳市南山区学苑大道1001号南山智园B1栋18楼",
        position: {
          lng: "114.009587",
          lat: "22.600399"
        }
      };
      var mapFrame = document.querySelector('#mapFrame');
      mapFrame.contentWindow.postMessage(JSON.stringify(msg));
    }
  </script>
</body>
</html>
复制代码

commonMap.html

<!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: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=我的ak"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
  const map = new BMapGL.Map('container');
  window.addEventListener('message', function (e) {
    // 地图实例初始化
    createMap(e.data)
    // 设置地图事件
    handleMap()
    // 添加控件
    handleControl()
    // 去掉底下的© 2021 Baidu - GS(2021)6026号 - 甲测资字1100930等文字
    setTimeout(function () {
      document.querySelector('.BMap_cpyCtrl.anchorBL').style.cssText = 'display:none;';
    }, 1000)
  }, false);

  // 地图实例初始化
  function createMap(msg) {
    const { position: { lng, lat }, name, address } = JSON.parse(msg)
    // 创建对应的经纬度
    const point = new BMapGL.Point(lng, lat);
    map.centerAndZoom(point, 16);
    // 加上对应的文字说明(名字+地址)
    const addressMsg = `<span style="color:grey">${address}</span>`
    const nameMsg = {
      width: 400,
      height: 50,
      title: `<span style="weight:bold">${name}</span>`
    }
    const infoWindow = new BMapGL.InfoWindow(addressMsg, nameMsg);
    map.openInfoWindow(infoWindow, point);
    // 加上对应的一个目的地图标
    const marker = new BMapGL.Marker(point, {
      icon: new BMapGL.Icon("./location.png", new BMapGL.Size(32, 32), {
        imageOffset: new BMapGL.Size(0, 0)
      })
    });
    map.addOverlay(marker);
  }

  // 设置地图事件
  function handleMap() {
    map.enableScrollWheelZoom(); // 鼠标滚动移动
    map.enableKeyboard() // 使用键盘上下键进行移动
  }

  // 添加控件
  function handleControl() {
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件-默认为米
    // scaleCtrl.setUnit(BMAP_UNIT_IMPERIAL); 可切换成英尺的单位
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
    map.addControl(zoomCtrl);
  }
</script>
复制代码

之前看到commonMap组件忽略了可以直接在title和content写标签和样式,以及比如双击放大,拖动都是默认的功能,传参重复混乱,所以我这里规整一下~

3.运行页面

因为使用window.postMessage进行传参,所以需要模拟服务器环境

1637218547(1).png

请在vscode安装live Server

1637218223(1).png

然后运行右键

1637218307(1).png

因为我们没有域名,直接运行的,所以会出现跨域,这里必须要Live Server插件可以用于模拟服务器环境

4.演示

我随便找家公司写的哟

测试9.gif

5.我的公众号

觉得自己没啥代码天赋,只能勤快点~最近在写一些关于在前端行业摸爬滚打还有生活中的趣事来让自己变得更加快乐,追求生活和工作中的进步

粉丝太少,请大家关注我~
公众号:程序媛爱唠嗑