原生JavaScript和Vue实现从百度地图抓取经纬度_Javascript

一、使用原生 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>