vue 百度地图的使用

月影照无眠

已于 2022-08-12 20:04:26 修改

阅读量321

点赞数 7

文章标签： vue.js 前端 javascript

于 2022-08-12 15:20:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_66496801/article/details/126304928

版权

在html引入外链

//ak码是注册百度开发者，申请的百度地图ak码，没有的话用不了

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&
ak="></script>
<script src="dist/extension/bmap.min.js"></script>

创建vue文件，封装组件

<template>
  <div id="map" :style="{ height: mapHeight }">
    <div id="allmap" ref="allmap"></div>
  </div>
</template>
<script>
export default {
  name: "BaiduMap",
  methods: {
    map() {
      let map = new window.BMap.Map(this.$refs.allmap); // 创建Map实例
      map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      map.addControl(
        new window.BMap.MapTypeControl({
          // 添加地图类型控件
          mapTypes: [window.BMAP_NORMAL_MAP, window.BMAP_HYBRID_MAP],
        })
      );
      //页面里的东南西北，和地图样式转换，不想要注释
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 // map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 // var marker = new BMap.Marker(point); // 创建标注 // map.addOverlay(marker); // 将标注添加到地图中 // map.setTrafficOn(); // 添加交通流量图层
      map.addControl(new BMap.NavigationControl()); //添加导航控件
      map.addControl(new BMap.OverviewMapControl()); //添加地图缩略图
      map.addControl(new BMap.MapTypeControl()); //添加地图类型
      // 上面的不用，就把下面的放开
      // map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
      // map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    },
    initMapHeight() {
      var main = document.getElementById("map");
      main.style.height = window.innerHeight + "px";
    },
  },
  data() {
    return {
      mapHeight: 800 + "px",
    };
  },
  mounted() {
    this.initMapHeight();
    this.map();
    window.onresize = () => {
      return (() => {
        this.mapHeight = window.innerHeight + "px";
      })();
    };
  },
};
</script>
<style>
#allmap {
  height: 100%;
  overflow: hidden;
}
</style>

页面中引入组件

import BaiduMap from "@/components/BaiduMap.vue";

使用标签就行：

<BaiduMap></BaiduMap>