在pc端展示市级定位

方法一利用浏览器自带的api来获取经纬度 再利用百度的逆位置查询 来获取

    <!-- <script
      type="text/javascript"
      src="https://api.map.baidu.com/getscript?v=3.0&ak=I1ut7FpGOrg9baBwa1Z4lRBDZodDTZSC"
    ></script> -->

    <script
      type="text/javascript"
      src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=I1ut7FpGOrg9baBwa1Z4lRBDZodDTZSC"
    ></script>

      if ('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition(function (position) {
          console.info('🚀 ~ log:1111 ----->', 1111)
          var lat = position.coords.latitude
          var lon = position.coords.longitude
          console.info('🚀 ~ log:lat,lon ----->', lat, lon)

          // v3版本 https 有问题
          // var map = new BMap.Map('container')
          // var geoc = new BMap.Geocoder()
          // geoc.getLocation(new BMap.Point(lon, lat), function (result) {
          //   if (result) {
          //     const { province, city, district, street, streetNumber, town } =
          //       result.addressComponents
          //     const html = `
          //       <h2>
          //         当前位置:${province}${city}${district}${street}${streetNumber}${town}
          //         </h2>
          //     `
          //     app.innerHTML = html
          //   }
          // })

          // v1版本 没问题
          var map = new BMapGL.Map('container')
          var geoc = new BMapGL.Geocoder()
          geoc.getLocation(new BMapGL.Point(lon, lat), function (result) {
            if (result) {
              const { province, city, district, street, streetNumber, town } =
                result.addressComponents
              const html = `
                <h2>
                  当前位置:${province}${city}${district}${street}${streetNumber}${town}
                  </h2>
              `
              app.innerHTML = html
            }
          })
        })
      }

 v3版本的有问题无法在谷歌浏览器上获取位置

可以用v1的

方法二

可以利用天气的api来发送接口来获取位置信息 不需要获取经纬度直接发送请求

 import axios from 'axios'


 axios({
     url:'https://v0.yiketianqi.com/free/day?appsecret=cqyR3nfP&appid=21357256',
     methods:'get',
     })
     .then((response) => {
      city.value = response.data.city
      //  debugger
     // 因为层级比较深，匿名函数会导致this指向发生改变
     // 这个时候使用箭头函数解决

     })
};

方法三 

可以用百度地图的api用id来获取定位

可以看下我的利用百度的js的API来获取浏览器定位_js 获取浏览器定位_z遥不可及的博客-CSDN博客