【百度 JavaScript API v3.0】Geolocation 当前位置、LocalCity 当前城市

定位当前位置

需求

定位当前的地址

技术点

官网地址： JavaScript API - 快速入门 | 百度地图API SDK

开发文档：百度地图JSAPI 3.0类参考

实现

第一步：在public的index.html中引入

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>

第二步：组件中使用

<template>
  <div>
    <div id="map"></div>
    <p>{
   
   { address }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      map: null,
	  point: null,
      address: ''
    };
  },
  mounted() {
    let that = this
    this.map = new BMap.Map("map");
    this.point = new BMap.Point(116.404, 39.915)
    this.map.centerAndZoom(this.point, 17);
    this.map.enableScrollWheelZoom();

    // 获取当前的地址
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){ 
      if(this.getStatus() === BMAP_STATUS_SUCCESS){
        console.log(r)
      }
    }); 
  },
}
</script>

<style lang="less">
#map {
  width: 300px;
  height: 300px;
}
</style>

解析

r的返回值：

r.getStatus()的状态码

BMAP_STATUS_SUCCESS                                检索成功。对应数值“0”。

BMAP_STATUS_CITY_LIST                                城市列表。对应数值“1”。

BMAP_STATUS_UNKNOWN_LOCATION           位置结果未知。对应数值“2”。 BMAP_STATUS_UNKNOWN_ROUTE                导航结果未知。对应数值“3”。 BMAP_STATUS_INVALID_KEY                           非法密钥。对应数值“4”。 BMAP_STATUS_INVALID_REQUEST                 非法请求。对应数值“5”。 BMAP_STATUS_PERMISSION_DENIED            没有权限。对应数值“6”。(自 1.1 新增) BMAP_STATUS_SERVICE_UNAVAILABLE         服务不可用。对应数值“7”。(自 1.1 新增) BMAP_STATUS_TIMEOUT                                   超时。对应数值“8”。(自 1.1 新增)

定位当前城市

需求

定位当前城市

技术点

官网地址： JavaScript API - 快速入门 | 百度地图API SDK

开发文档：百度地图JSAPI 3.0类参考

实现

第一步：在public的index.html中引入

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>

第二步：组件中使用

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      map: null,
	  point: null,
    };
  },
  mounted() {
    let that = this
    this.map = new BMap.Map("map");
    this.point = new BMap.Point(116.404, 39.915)
    this.map.centerAndZoom(this.point, 17);
    this.map.enableScrollWheelZoom();

    // 当前城市
    var city = new BMap.LocalCity();
    city.get(function(rs){
      console.log(rs.name)
    });
  },
}
</script>

<style lang="less">
#map {
  width: 300px;
  height: 300px;
}
</style>

解析

rs的内容：