vue2集成amap（高德地图）位置搜索和定位

最新推荐文章于 2024-09-19 22:05:10 发布

michaelzhouh

最新推荐文章于 2024-09-19 22:05:10 发布

阅读量2.3w

点赞数 1

分类专栏： vue2 文章标签： vue2 ampa 高德地图 javascript

本文链接：https://blog.csdn.net/michaelzhouh/article/details/73292210

版权

vue2 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍如何在Vue项目中集成高德地图API，并实现地址搜索功能。通过创建高德地图账号并获取Key，利用npm安装vue-amap，然后在main.js中进行配置。文章还提供了具体的代码示例，包括输入框监听、搜索结果展示及点击事件。

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

我只用到地址的搜索和获取当前地址，没有加上地图，要做其他效果完全可以参考官方文档。

如果有其他vue的功能需求，大家可以给我留言，我选需求高的开发。

有几个注意事项是，我是2017-6-15开发的，目前的vue-amap api太简陋了，而且定制化很恼火，所以建议集成vue-amap后，再结合官方文档。

随便值得高兴的是，终于摆脱了百度地图恶心的api，不需要头部直接引用百度地图那个js了，因为我整个项目就只有一个页面要用到地图功能，全局引入太恶心了。

下面进入正题：

1. 到高德地图注册一个帐号，创建应用，创建一个key

2. 安装

npm install vue-amap --save

2. main.js引入

// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);

// 初始化vue-amap
AMap.initAMapApiLoader({
  // 申请的高德key
  key: 'YOUR_KEY',
  // 插件集合
  plugin: ['AMap.PlaceSearch', 'AMap.Geolocation']
});

我目前只用到了这2个，其他的api，其实参照官方的javascript的api，使用方法都同理了。难点反而是集成到项目之后的样式控制。

3. 页面使用，样式等自己写

<input type="text" ref="searchText" id="searchText" @keyup="keyUpSearch" placeholder="请输入地址"/>  


<div class="address_items" id="address_result" v-if="searchData.length > 0">
  <div class="address_item" v-for="item in searchData" @click="selectAddress(item)">
    <div class="title">{{ item.name }}</div>
    <div class="description">{{ item.pname }}{{ item.cityname }}{{ item.address }}</div>
  </div>
</div>

<div id="temp" style="display: none;"></div>

methods里面添加对应的keyUpSearch方法

keyUpSearch () { 
    var _this = this;
    var txt = this.$refs.searchText.value; 
    AMap.service(["AMap.PlaceSearch"], function() { 
        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类 
            pageSize: 12, 
            pageIndex: 1, 
            city: "成都", //城市 
            cityLimit: 'true', 
            panel: 'temp'//搜索结果的展示面板对元素id，不知道为什么一定要有该参数，最终获取的结果才更完整，参数更多跟完整。所以我在页面随便写了一个<div id="temp" style="display:none"></div>
          });
          //关键字查询
          placeSearch.search(txt, function(status, result) {
            if (status == 'complete' && result.info == 'OK') {
//这里可以console.log(result)，查看所有返回的参数，遍历展示这些基本的，我就不赘述
                //_this.searchData = result.poiList.pois
            }
          })
        })
      }

对应的搜索结果点击方法

selectAddress (item) {
        // 选中后执行，根据自己业务选择
        console.log(item);
｝

相关链接：vue-amap
https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
高德地图api
http://lbs.amap.com/api/javascript-api/example/poi-search/keywords-search

很多朋友都留言说希望有个预览的网址，我写了个demo，移动端和PC浏览器都可以访问。

http://vue.mho666.com/#/amp_suggest