百度地图的使用
百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)
在vue项目中
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<link rel="stylesheet" href="./src/assets/font/iconfont.css">
<script src="/tinymce/tinymce.min.js"></script>
<script src="/tinymce/langs/zh-Hans.js"></script>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=密钥"></script> //引入百度地图API文件
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
单文件页面
步骤：
- 创建容器container
- 首先创建地图实例
- 在onMounted中使用
<template>
<div id="container">
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const map = () => {
const map = new BMapGL.Map("container"); // 创建地图实例
const point = new BMapGL.Point(104.072425,30.663503); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
}
onMounted(() => {
map()
})
</script>
<style lang='scss' scoped>
#container {
width: 100%;
height: 100%;
}
</style>
