1.引入百度api值public文件夹index.html
2.安装依赖
npm install @amap/amap-jsapi-loader
- 获取 key 值。
- 注册高德账号,注册成功后登录,然后 添加 key 值。复制添加后的 Key 值到组件,就可以使用了。
5.引入组件
import AMapLoader from "@amap/amap-jsapi-loader";
function getadress() {
window._AMapSecurityConfig = {
securityJsCode: "f902f26ff2a29756cf51384dda1ec0eb",
};
let startLngLat = ref('')
AMapLoader.load({
key: "24f840a20d3c6782254aa2fa03a2a8e0", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [], // 需要使用的插件列表
}).then((AMap) => {
// 初始化地图
map.value = new AMap.Map('dwmap', {
viewMode: "3D", // 是否为3D地图模式
zoom: 18, // 初始化地图级别
center: [106.535698, 29.565219], // 初始化地图中心点位置
});
let that = this;
AMap.plugin("AMap.Geolocation", () => {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
});
geolocation.getCurrentPosition(function (status, result) {
console.log("status, result", status, result);
if (status === "complete") {
console.log("成功:", JSON.stringify(result.position));
startLngLat.value = result.position
// //引入和创建驾车规划插件 这个是高德地图,手机获取位置时很精准
AMap.plugin(["AMap.Driving"], function () {
const driving = new AMap.Driving({
map: map.value,
panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
});
const endLngLat = [106.535698, 29.565219] //终点坐标
//获取起终点规划线路
driving.search(startLngLat.value, endLngLat, function (status, result) {
if (status === "complete") {
//status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误
//查询成功时,result 即为对应的驾车导航信息
console.log(result);
} else {
}
});
});
} else {
// console.log("获取驾车数据失败:" + result);
API.get_map().then(res => {
let rectangle = res.data.data.rectangle
console.log(rectangle);
const afterSemicolon = res.data.data.rectangle.split(';')[1];
const coordinates = afterSemicolon.split(',').map(coord => parseFloat(coord));
console.log(coordinates);
AMap.plugin(["AMap.Driving"], function () {
const driving = new AMap.Driving({
map: map.value,
panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
});
const endLngLat = [106.535698, 29.565219] //终点坐标
//获取起终点规划线路
driving.search(coordinates, endLngLat, function (status, result) {
if (status === "complete") {
//status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误
//查询成功时,result 即为对应的驾车导航信息
console.log(result);
} else {
}
});
});
})
}
});
});
}).catch((e) => {
console.log(e);
});
}
3.加上销毁事件
onUnmounted(() => {
map.value?.destroy();
});
最终效果