<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UniApp 百度地图示例</title>
<!-- 引入百度地图 JavaScript API -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=your_ak"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<view>
<!-- 地图容器 -->
<view id="map-container" style="width: 100%; height: 500px;"></view>
</view>
</template>
<script>
export default {
onReady() {
// 页面初次渲染完成后初始化地图
this.initMap();
},
methods: {
initMap() {
// 创建地图实例
const map = new BMapGL.Map('map-container');
// 创建点坐标
const point = new BMapGL.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
// 添加地图控件
map.addControl(new BMapGL.NavigationControl());
// 开启定位
this.getLocation(map);
},
getLocation(map) {
// 创建定位实例
const geolocation = new BMapGL.Geolocation();
// 开启高精度定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition((r) => {
if (geolocation.getStatus() === 0) {
// 定位成功，设置地图中心点
const point = new BMapGL.Point(r.point.lng, r.point.lat);
map.centerAndZoom(point, 15);
// 添加定位标记
const marker = new BMapGL.Marker(point);
map.addOverlay(marker);
} else {
console.log('定位失败，错误码：' + geolocation.getStatus());
}
});
}
}
};
</script>
<style scoped>
/ 地图容器样式 /
map-container {
width: 100%;
height: 500px; }
</style>
0 个回复