vue使用百度地图（自己记录）

vue使用百度地图

1、打开public文件夹下的index.html

2、引入百度地图信息

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=密钥"></script>
    <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/AreaRestriction/src/AreaRestriction.min.js"></script>

3、组件里面使用

• html

      <div id="map"></div>

• script

<script>
export default {
  data() {
    return {
      title: "",
    };
  },
  created() {},
  mounted() {
    this.baiduMap();
  },
  computed: {},
  watch: {},
  methods: {
    baiduMap() {
      // 创建地图
      var map = new BMapGL.Map("map"); 
    
      // 定位中心点及地图缩放比例
      map.centerAndZoom(new BMapGL.Point(114.212162, 35.171591), 13);
      // 鼠标滑轮滚动控制地图缩放
      map.enableScrollWheelZoom(true);

      let mapArr = [
        [114.245938, 35.167696],
        [114.249388, 35.152587],
        [114.228116, 35.125667],
        [114.172636, 35.131099],
        [114.144465, 35.142198],
        [114.16545, 35.176666],
      ];

      for (let i = 0; i < mapArr.length; i++) {
        const element = mapArr[i];
        var marker = new BMapGL.Marker(
          new BMapGL.Point(element[0], element[1])
        );

        map.addOverlay(marker);
      }
    },
  },
};
</script>

要给地图个宽高，要不然看不到

效果图