原生JavaScript和Vue实现从百度地图抓取经纬度
作者：I'm兰陵王
在前端开发中,使用百度地图 API 来获取用户的经纬度是一种常见需求,本文提供了使用原生 JavaScript 和 Vue.js 实现从百度地图抓取经纬度的详细示例,需要的可以了解下
一、使用原生 JavaScript 获取百度地图经纬度
1. 引入百度地图 API
在 HTML 文件的 <head> 标签中引入百度地图的 API。确保将 你的百度地图 AK 替换为你实际的 API 密钥。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图 - 原生 JavaScript</title>
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地图 AK" type="text/javascript"></script>
<style>
#map { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<button id="getLocation">获取我的位置</button>
<script>
var map;
function initMap() {
// 创建地图实例
map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 默认显示北京
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
// 点击地图获取经纬度
map.addEventListener("click", function(e) {
var latitude = e.point.lat; // 获取纬度
var longitude = e.point.lng; // 获取经度
alert("经度: " + longitude + ", 纬度: " + latitude); // 弹出经纬度
});
}
function getCurrentLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
alert("当前经度: " + longitude + ", 当前纬度: " + latitude);
}, function() {
alert("获取位置失败");
});
} else {
alert("浏览器不支持地理定位服务");
}
}
// 初始化地图
window.onload = function() {
initMap();
document.getElementById("getLocation").onclick = getCurrentLocation;
};
</script>
</body>
</html>
2. 代码解析
地图初始化：通过 BMap.Map 创建地图，设置中心点和缩放级别。
点击事件：通过 map.addEventListener 监听地图的点击事件，获取点击的经纬度并弹出。
获取用户位置：使用 Geolocation API 获取用户当前位置信息，并在地图上添加标记。
二、使用 Vue.js 获取百度地图经纬度
1. 创建 Vue 项目
如果还没有 Vue 项目，可以使用 Vue CLI 创建一个新的项目。
vue create my-vue-map-app cd my-vue-map-app
2. 在 public/index.html 中引入百度地图 API
在public/index.html 文件的 <head> 标签内引入百度地图 API。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 百度地图</title>
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地图 AK" type="text/javascript"></script>
</head>
3. 创建 MapComponent.vue 组件
在 src/components 目录下创建 MapComponent.vue，代码如下：
<template>
<div>
<div id="map" style="width: 100%; height: 500px;"></div>
<button @click="getCurrentLocation">获取我的位置</button>
</div>
</template>
<script>
export default {
name: 'MapComponent',
data() {
return {
map: null,
};
},
mounted() {
this.initMap();
},
methods: {
// 初始化百度地图
initMap() {
this.map = new BMap.Map("map");
const point = new BMap.Point(116.404, 39.915); // 默认显示北京
this.map.centerAndZoom(point, 15);
this.map.addControl(new BMap.NavigationControl());
// 点击获取经纬度
this.map.addEventListener("click", (e) => {
const latitude = e.point.lat;
const longitude = e.point.lng;
alert(`经度: ${longitude}, 纬度: ${latitude}`);
});
},
// 获取用户当前地理位置
getCurrentLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const point = new BMap.Point(longitude, latitude);
this.map.centerAndZoom(point, 15);
const marker = new BMap.Marker(point);
this.map.addOverlay(marker);
alert(`当前经度: ${longitude}, 当前纬度: ${latitude}`);
}, () => {
alert("获取位置失败");
});
} else {
alert("浏览器不支持地理定位服务");
}
}
}
};
</script>
<style scoped>
#map {
width: 100%;
height: 500px;
}
</style>4. 在 App.vue 中使用组件
在 src/App.vue 中引入并使用 MapComponent：
<template>
<div id="app">
<MapComponent />
</div>
</template>
<script>
import MapComponent from './components/MapComponent.vue';
export default {
name: 'App',
components: {
MapComponent
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 30px;
}
</style>5. 运行 Vue 应用
确保你在项目目录下，然后运行以下命令启动开发服务器：
npm run serve
打开浏览器，访问 http://localhost:8080 网址，你应该能看到百度地图和获取位置的按钮。
总结
这两个示例展示了如何在前端使用原生 JavaScript 和 Vue.js 集成百度地图 API，并获取用户的经纬度信息。根据实际需求，你可以在此基础上进行扩展和优化，例如添加多个标记、绘制路径等功能。
以上就是原生JavaScript和Vue实现从百度地图抓取经纬度的详细内容，更多关于JavaScript Vue获取百度地图经纬度的资料请关注脚本之家其它相关文章！