[Baidu JavaScript API v3.0] Geocoder address resolution

Table of contents

Geocoding

reverse geocoding

---

Geocoding

need

Parse the clicked point into a specific address.

Technical points

Official website address:  JavaScript API - Quick Start | Baidu Map API SDK

Development document: Baidu map JSAPI 3.0 class reference

accomplish

Step 1: Introduce in public index.html

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

The second step: use in the component

<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();
    
    this.map.addEventListener("click", function(e){

    // 地址解析
    let geoc = new BMap.Geocoder(); 
    geoc.getLocation(e.point, function(rs) {  
      let addr = rs.addressComponents;  
      that.address = addr.province + addr.city + addr.district + addr.street + addr.streetNumber; // 地址：省市区街道门牌号
    })   
  },
}
</script>

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

analyze

geoc.getLocation()

reverse geocoding

need

After entering the address, click the search button to parse it into points.

Technical points

Official website address:  JavaScript API - Quick Start | Baidu Map API SDK

Development document: Baidu map JSAPI 3.0 class reference

accomplish

Step 1: Introduce in public index.html

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

The second step: use in the component

<template>
  <div>    
    <!-- 搜索框 -->
    <div style="display:flex; align-items: center;">
      <el-input v-model="keyword" style="width: 210px; margin-right: 15px"></el-input>
      <el-button type="primary" @click="search()">搜索</el-button>
    </div>

    <!-- 地图 -->
    <div id="map"></div>

    <!-- 经纬度 -->
    <p>{
   
   { latlng }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      map: null,
      point: null,
      keyword: '',
      latlng: ''
    };
  },
  mounted() {
    this.map = new BMap.Map("map");
    this.point = new BMap.Point(116.404, 39.915)
    this.map.centerAndZoom(this.point, 17);
    this.map.enableScrollWheelZoom();
  },
  methods: {
    search() {
      let that = this
      if(this.keyword) {
        let geoc = new BMap.Geocoder(); 
        geoc.getPoint(this.keyword, function(rs) {  
            that.latlng = 'lat:' + rs.lat + 'lng:' + rs.lng
        });
      }
    },
  }
}
</script>

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

analyze

geoc.getPoint()