高德地图地铁公交站点...查询

高德地图的查询(地铁…)

引入的是高德的搜索插件(AMap.PlaceSearch)

具体使用: (记得注册高德地图的key) ， 效果图在最后哦。

1. 引入高德sdk，记得注册key

• 将sdk放在vue的public文件夹的index.html下注意红框的地方，是你要用到的插件，否则会报AMap.xx is not constructor错误
  
• 然后在vue.config.js文件里面定义地图变量

 export default {
     configureWebpack: {
         externals: {
   'AMap': 'AMap' // 高德地图配置
 }
     }
 }

- 在组件里面引入

    import AMap from 'AMap'

相应代码及解释:

<template>
  <div>
    <div id="container">
      <div id="panel"></div>
    </div>
    <div class="footer mt10">
      <div style="font-size:16px;" v-for="(item, index) in distance" :key="index">
        <span>距离</span>
        <span class="ml10 mr10" style="color:#2D78E1;">{{campus}}校区</span>
        <span>{{(item / 1000).toFixed(2)}}km</span>
      </div>
    </div>
  </div>
</template>
/*-------------上面是初始化的地图及信息面板--------------------------*/
<script>
import AMap from 'AMap'
export default {
  name: 'selectedMap',
  props: {
      // 父组件传过来的关键字
    keyWord: {
      type: String,
      default: ''
    },
    // 参照点名字，这儿是望江校区
    campus: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
        // 中心点也可以是父组件传过来显示，我这儿没有坐标，就先写死了
      centerData: [103.999302, 30.557177],
      map: '',
      // 距离参照点的距离
      distance: [],
      placeSearch: ''
    }
  },
  watch: {
      // 监听父组件传过来的关键字，然后搜索相应服务
    keyWord: function (val, oldVal) {
      if (val) {
          // 先清空
        this.placeSearch.clear()
        // 搜索相应信息
        this.changeLocation(val)
      }
    }
  },
  methods: {
      // 出事化地图
    async init () {
      return new AMap.Map('container', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 10, // 初始化地图层级
        center: this.centerData
      })
    },
    // 点击出现路线规划
    planLine (target) {
      this.walking.search(this.centerData, target)
    },
    // 切换选择类型
    changeLocation (val) {
      this.placeSearch.searchNearBy(val, this.centerData, 5000, (status, result) => {
        this.distance = result.poiList.pois.slice(0, 3).map(item => {
          return item.distance
        })
      })
    },
    // 异步初始化插件
    initPlugin () {
      AMap.plugin('AMap.PlaceSearch, AMap.Walking', () => { // 异步加载插件
      // 搜索的插件
        this.placeSearch = new AMap.PlaceSearch({
          map: this.map,
          city: '成都市',
          citylimit: true, // 限制在设置的城市内搜索
          //   type: this.type, // 搜索的类型,多个类型用|分割
          autoFitView: true,
          panel: 'panel', // 注意: 这是展示信息的面板容器，对应的是id=panel的html元素
          pageSize: 3, // 1页展示3条数据
          pageIndex: 1 // 当前页码

        })
        // 初始化路线的插件
        this.walking = new AMap.Walking({
          map: this.map,
          autoFitView: true
        })
        // 点击面板触发的事件
        this.placeSearch.on('listElementClick', (info) => {
          // 拿到经纬度
          var lnglatObj = info.data
          var lnglat = [lnglatObj.location.lng, lnglatObj.location.lat]
          // 距离中心点的距离
          var distance = lnglatObj.distance
          this.planLine(lnglat)
        })
      })
    }

  },
  async mounted () {
    this.map = await this.init()
    // 初始化插件
    this.initPlugin()
    this.changeLocation(this.keyWord)
  }
}
</script>

<style lang="less" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#container {
  position: relative;
  width: 100%;
  height: 500px;

  #panel {
    position: absolute;
    z-index: 100;
    width: 200px;
    top: 20px;
    right: 20px;
  }
}
</style>

重点就是: 初始化地图map, 然后引入搜索插件存为全局变量this.placesearch = AMap.PlaceSearch，调用周边搜索方法 this.placesearch.searchNearBy(keyWord: String(关键字搜索), center: lnglat(中心点经纬度), radius: Number(半径), callback(status:(搜索状态complete), result: 返回数据){ 通过返回的数据，里面包含距离中心点的距离，是我需要展示的}), 之后调用事件方法this.placeSearch.on(‘listElementClick’, (info) => {拿到点击的经纬度,用来规划路线，存为: this.clickLng} , 规划路线，初始化存为变量this.walking = AMap.Walking, 最后用查询路线的this.walking.search(center(中心点经纬度), target(目标经纬度: 之前存的this.clickLng)), 之后路线规划完成。

最后效果:

未点击规划路线:

点击规划路线: