【百度 JavaScript API v3.0】Geocoder 地址解析

最新推荐文章于 2024-09-10 09:45:15 发布

宾果的救星

最新推荐文章于 2024-09-10 09:45:15 发布

阅读量595

点赞数

分类专栏：数据可视化文章标签： javascript 百度前端

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/128934880

版权

数据可视化专栏收录该内容

33 篇文章 6 订阅

订阅专栏

该文介绍了如何利用百度地图的JavaScriptAPI进行地址解析和逆地址解析。首先在HTML中引入API，然后在Vue组件中创建地图实例，监听地图点击事件以进行地址解析。同时，展示了输入地址搜索后转换为经纬度（点）的逆地址解析过程。

摘要由CSDN通过智能技术生成

地址解析

逆地址解析

地址解析

需求

将点击的点（point）解析成具体的地址。

技术点

官网地址： 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();
    
    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>

解析

geoc.getLocation()

逆地址解析

需求

输入地址后点击搜索按钮，解析成点（point）。

技术点

官网地址： 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 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>