定位的三种实现方法

目前网页定位，使用的是浏览器定位，高德地图定位，百度地图定位，浏览器和高德我都试了，在火狐上是可以的，在谷歌浏览器不可以，高德地图官方解释是：

个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。

vue 获取当前位置经纬度（浏览器定位）
在vue中使用高德地图，获取定位
我这个网页，需要放在安卓app内，因为安卓的webview是谷歌内核，所以不会支持，最后我使用了百度地图，发现是可以的
Vue实现城市定位（利用百度地图

我这边有改动，我需要根据经纬度来转换到具体的地址。要先去申请ak，这个看官方文档
JavaScript API GL
在public文件夹下的index.html中引入百度的引用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta base="/" id="base" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=no"
    />

    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>第一个vue</title>
    <meta name="format-detection" content="telephone=yes"/>
 
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=xxxxx"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xxxxxx"></script>
    
  </head>

  <body>

在vue.config.js里

  //压缩打包文件大小
  configureWebpack: (config) => {
  
    config.externals = {
      "BMap": 'BMap'

在需要定位的地方。second.vue里使用

<template>
  <div>{{ LocationCity }}</div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      musicTypeJSON: {},
      searchValue: "",
      result: [],
      titleTypeJSON: {}, //热门城市
      LocationCity: "正在定位...", //一个初始值''
    };
  },
  methods: {
    city() {
      //定义获取城市方法
      const geolocation = new BMap.Geolocation();
      var _this = this;
      geolocation.getCurrentPosition(
        function getinfo(position) {
          let city = position.address.city; //获取城市信息
          let province = position.address.province; //获取省份信息
          console.log(position);
          // 创建地理编码实例
          var myGeo = new BMapGL.Geocoder();
          // 根据坐标得到地址描述
          myGeo.getLocation(
            new BMapGL.Point(position.longitude, position.latitude),
            function (result) {
              if (result) {
               
                  _this.LocationCity ="经纬度："+position.longitude+","+position.latitude+",地址："+
                  result.address;;
              }
            }
          );
        
        },
        function (e) {
          _this.LocationCity = "定位失败";
        },
        { provider: "baidu" }
      );
    },
  },
  mounted() {
    this.city(); //触发获取城市的方法
  },
};
</script>
<style>
div {
  word-break: break-all;
}
</style>
# vue.js # javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

Python文本统计与分析：从基础到进阶

avatar 华为云开发者联盟
cover

教你用Perl实现Smgp协议

avatar 华为云开发者联盟