Use Baidu map in uniapp (nanny teaching, start from scratch)
Recently, I am writing a mobile map project, and it is also the first time to fully understand the Baidu map api. This blog will teach you how to use the Baidu map api and some common problems. I will continue to update and improve this blog in the future.
1. Baidu map api, get the key
Why choose this? As a top manufacturer, Baidu Maps Open Platform has very complete functions and is simple and clear.
This blog is mainly based on javascript API
First log in to the application management on the left side of the console → my application → create an application
After completing these, you can see that there is an additional one just created in my application , and the access application (AK) inside is the AK we need.
2. Use Baidu map api in uniapp
I have read a lot of blogs, and some blogs say that npm downloads the corresponding ones and then mounts them globally. Here I will write according to what the official website said.
2.1web-view (the first small focus!)
The Baidu map api is different from other components we have used before. For beginners, what is written on the official website is used in the html page, but our page in the uniapp project is a .vue file, so it is very confusing. So here, we use a component in uniapp called web-view
What does this sentence mean on the official website? Simply speaking, it is similar to an iframe tag, that is, we often say that another page is nested in one page, and the page we nest will automatically fill the entire page (unless We set width and height to it)
That is to say, we add tags to the .vue file to be displayed to import our .html file, so as to realize the use of Baidu map in the page
2.2 Example (h5 terminal test)
First, we create a map.html file (here it is recommended to put the file in the static directory, otherwise it will not respond when it is introduced in vue)
It doesn’t matter how many hierarchical directories there are, anyway, the root directory must be under static, and then we edit the map.html file
//这个文件里面就是我们对百度地图进行一系列操作和更改的地方
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#mapPage {
height: 100%;
position: relative;
}
#container {
height: 100%
}
</style>
</head>
<body>
<div id='mapPage'>
<div id='container'></div>
</div>
</body>
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
<!-- 百度地图 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=这里填刚才我们在百度地图控制台中得到的AK"></script>
<script type="text/javascript">
document.addEventListener('UniAppJSBridgeReady', function() {
// ------------------------------------ 配置百度地图 --------------------------------------------------------------------------------
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
});
</script>
</html>
Then we open the vue file we want to use the map
<template>
<view class="map">
//在web-view标签中引入我们map.html文件的地址，如果没显示出来，按照上面说的把map.html文件放到static目录下
//不设置宽高的话地图就会默认的铺满整个页面
<web-view src="/static/html/map.html" style="width: 100%;height: 500px;"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 300px;
}
</style>
Finally let's run the project
You can see that the map has been loaded
3. Basic parameters and usage introduction of Baidu map api
Basic usage explanation
var map = new BMapGL.Map("container");//创建地图实例，与id匹配
var point = new BMapGL.Point(116.404, 39.915);//创建中心点的坐标(经纬度)，百度地图在坐标上有个转换，百度对外接口用的是BD09坐标系，这个下一个博客会细说
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
some parameters
map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件,地图左下方
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件,地图右下方
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件,左上方
map.addControl(cityCtrl);
var copyrightCtrl = new BMapGL.CopyrightControl(); // 添加版权控件,左下方
map.addControl(copyrightCtrl);
switch to 2d map
map.setHeading(0);
map.setTilt(0);
//上面这两个值不要或者像我一样设置成0,然后添加地图类型为默认
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
]}));
About the map interaction function and coordinate conversion function in the next blog
About the simple use of Baidu map, just write here, thank you!