H5获取用户所在城市 网页获取用户城市名称

获取用户城市名称，这里我是使用的百度地图JSAPI 2.0 文档链接

实现步骤：

1.在index.html中引用百度地图的js文件，如下：(需要使用自己的ak,获取方式：点击去官网申请ak)

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

使用的示例1：

直接在VUE.js获取用户所在城市名称

new BMap.LocalCity().get(res=>{
  console.log(res.name); //城市名称
})

 

使用的示例2：

1.1 把获取用户城市名称的方法进行封装

        //百度地图获取城市名称的方法
        _this.prototype.getCurrentCityName = ()=> {
            return new Promise((resolve, reject)=> {
                let myCity = new BMap.LocalCity()
                myCity.get(result=> {
                    resolve(result.name)
                })
            })
        }

1.2 在VUE中使用

<template>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        cityName:''
      };
    },
    mounted: function() {
      this.getCurrentCityName().then(city => {
        this.cityName = city;
        console.log(city); //城市名称
      })
    }
  }
</script>

<style>
</style>