Vue3调用百度地图API

戴夫有颗向日葵i

已于 2024-02-28 14:57:20 修改

阅读量736

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue

于 2024-02-28 14:56:32 首次发布

本文链接：https://blog.csdn.net/weixin_48171026/article/details/136346333

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()