Vue本地开发的移动端如何在手机上查看？

1. 申请百度key

然后百度会让你输入你的地址，我是本地访问么，我就写的是127.0.0.1，然后在修改配置文件中的host,把localHost修改成127.0.0.1 然后在index.html中添加

<script src="http://api.map.baidu.com/api?v=2.0&ak=key"></script>

可以在webpack的配置文件中添加

  externals:{
    "BMap":"BMap"
  },

也可以不添加，这个看你自己使用的方式

2. 获取浏览器的经纬度

这个地方参考了一篇博文，但是忘记在哪里看到的了，如果作者看到的话评论一下，我加上链接

export default class Location {
  static getLocation(callback) {
    console.log(navigator.geolocation);
    if (navigator.geolocation) {
      let options = {
        enableHighAccuracy: true,
        maximumAge: 1000
      };

      navigator.geolocation.getCurrentPosition(
        (res) => {
          let location = {};
          location.longitude = res.coords.longitude;
          location.latitude = res.coords.latitude;
          callback.success(location);
        },
        (res) => {
          callback.error(res);
        },
        options
      );
    } else {
      callback.error("Geo location not supported.");
    }
  }
}

这样浏览器进入这个页面就直接定位到当前位置

<script>
  import BMap from 'BMap';
  import LocationSDK from "../../common/locationSDK";
  export default {
    name: "findComponent",
    data(){
      return{
        location:{
          latitude:"-1",
          longitude:"-1"
        }
      }
    },
    mounted() {
      let that = this;
      this.getLocation((res)=>{that.ready(res)});

    },
    methods:{
      ready(res){
        let map = new BMap.Map("allmap");
        console.log(res);
        let point = new BMap.Point(res.longitude,res.latitude);
        console.log(point);
        map.centerAndZoom(point,11);

        map.setCurrentCity("上海");
        map.enableScrollWheelZoom(true)
        let local = new BMap.LocalSearch(map,
          { renderOptions:{map: map, autoViewport: true}});
        local.searchNearby("电影院","浦东新区");
      },
      getLocation(callback){
        LocationSDK.getLocation({
          success:(res)=>{
            this.location = res;
            callback(this.location)
          },
          error:(err)=>{
            console.log(err)
          }
        })
      }
    }
  }
</script>

这个地方注意要在mounted里面初始化地图，要不然会报错

3. 完整的地址

github.com/Visupervi/-…