Vue3调用百度地图API

Vue3调用百度地图API

1 准备事项

注册百度地图API及获取密钥。百度一查一大堆，就过多描述了
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show

2 代码

2.1 首先在public文件夹下index.html中引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=申请的密钥"></script>

2.2 业务代码

<template>
  <div id="allmap"></div>
</template>

<script>
import {
  getUserAddressList
} from './mapSum.api';
import { defineComponent, onMounted } from "vue";
import {UserOutlined, DownOutlined} from '@ant-design/icons-vue';
import {message, Pagination, AutoComplete} from 'ant-design-vue';
import {defHttp} from '/@/utils/http/axios';
import {
  getToken
} from '/@/utils/auth';

export default {
  components: {
    DownOutlined,
    'a-pagination': Pagination,
    'a-auto-complete': AutoComplete,
  },
  setup() {
    onMounted(() => {
      // loadMapScript();
      init();
    });
    // 初始化地图 --本来地图加载写在init里的，由于此方法加载时组件实例还没有被完全创建，所以在这里调不到业务代码，这里的代码重写在mounted中
    const init = () => {
      // let Bmap = window.BMap; // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
      // var map = new Bmap.Map("allmap"); // allmap必须和dom上的id一直
      // map.centerAndZoom(new Bmap.Point(117.330539, 31.734294), 7); // 初始化地图,设置中心点坐标和地图级别
      // map.setCurrentCity("安徽");
      // map.enableScrollWheelZoom(true);

    };

    const loadMapScript = () => {

    };
  },
  data() {
    return {
      jsonData:[[116.404,39.915,'水厂1地址：中华路1号'],[116.383752,39.91334,'水厂2地址：兴宁路13号']],
      center: { lng: 0, lat: 0 }, //经纬度
      zoom: 13 //地图展示级别
    }
  },
  mounted() {
    this.fillMap()
  },
  methods:{
    //---------------------------------------第一部分 初始化地图-------------------------------------
    fillMap(){
      let Bmap = window.BMap; // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
      var map = new Bmap.Map("allmap"); // allmap必须和dom上的id一直
      map.centerAndZoom(new Bmap.Point(117.250552,32.974772), 7); // 初始化地图,设置中心点坐标和地图级别
      // map.setCurrentCity("安徽");
      map.enableScrollWheelZoom(true);

        //-----------------------------第二部分 获取用户坐标列表，渲染坐标点---------------------------------
        getUserAddressList({}).then(res =>{
          console.log("res====",res)
            this.fillCoordinate(Bmap,map,res)
        })
    },
      //------------------------------------第三部分 渲染部分------------------------------------------
    //渲染坐标点
    fillCoordinate(Bmap,map,res) {
      //自定义坐标点样式
      var green = new BMap.Icon("服务器线上地址/icon/green.png", new BMap.Size(50, 50), {//尺寸大小
        imageSize: new BMap.Size(50, 50)
      });
      //创建坐标点
      for (let i = 0; i < res.length; i++) {
        var points = new Bmap.Point(res[i].longitude, res[i].latitude);
        var label = new BMap.Label(res[i].realname,{//创建文本标注
          offset:new BMap.Size(40,30)//距离坐标偏移位置 40-x轴  30-y轴
        });
        var marker = new BMap.Marker(points,{icon:green});
        marker.setLabel(label);
        map.addOverlay(marker);
      }

    }
  },
  watch: {}
}
</script>

<style  lang='less' scoped>

#allmap {
  // 注意给dom宽高，不然地图不出来
  width: 100%;
  height: 100%;
}
</style>

效果图