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

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

下面进入正题：

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

2.  安装

[plain]  view plain  copy
  1. npm install vue-amap --save  
2. 配置

[plain]  view plain  copy
  1. // 引入vue-amap  
  2. import AMap from 'vue-amap';  
  3. Vue.use(AMap);  
  4.   
  5. // 初始化vue-amap  
  6. AMap.initAMapApiLoader({  
  7.   // 申请的高德key  
  8.   key: 'YOUR_KEY',  
  9.   // 插件集合  
  10.   plugin: ['AMap.PlaceSearch', 'AMap.Geolocation']  
  11. });  

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

3. 开始使用

[html]  view plain  copy
  1. <input type="text" ref="searchText" id="searchText" @keyup="keyUpSearch" placeholder="请输入地址"/>    
  2.   
  3.   
  4. <div class="address_items" id="address_result" v-if="searchData.length > 0">  
  5.   <div class="address_item" v-for="item in searchData">  
  6.     <div class="title">{{ item.name }}</div>  
  7.     <div class="description">{{ item.pname }}{{ item.cityname }}{{ item.address }}</div>  
  8.   </div>  
  9. </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
            }


          })
        })
      }


相关链接：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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue