Vue中使用高德地图

Vue中使用高德地图定位及poi搜索，以及其他插件的使用方法

1、第一步安装 npm install vue-amap --save

2、引入vue-amap

main.js

import Vue from 'vue';
import VueAMap from 'vue-amap';
import App from './App.vue';Vue.use(VueAMap);
VueAMap.initAMapApiLoader({             //可全局初始化，也可按需初始化key: 'your amap key',uiVersion: '1.0.11', // 如果要使用官方的ui 在此必须要配置//plugin是你要使用到的插件，直接在这里注册plugin: ['AMap.Geocoder','AMap.Autocomplete', // 输入提示插件'AMap.PlaceSearch', // POI搜索插件'AMap.Scale', // 右下角缩略图插件 比例尺'AMap.OverView', // 地图鹰眼插件'AMap.ToolBar', // 地图工具条'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制'AMap.PolyEditor', // 编辑 折线多，边形'AMap.CircleEditor', // 圆形编辑器插件'AMap.Geolocation' // 定位控件，用来获取和展示用户主机所在的经纬度位置],// 默认高德 sdk 版本为 1.4.4v: '1.4.4'
});new Vue({el: '#app',render: h => h(App)
})

3、使用(自定义poi搜索及定位)

<template><div><p>{{address}}</p><div class="search-box"><input v-model="searchKey" type="search" id="search"><button @click="searchByHand">搜索</button></div>搜索结果：<ul v-if="searchKey!==''"><li v-for="item in result" :key="item.id" @click="checkAddress(item)">{{item.name}}</li></ul><div class="amap-page-container"><el-amap vid="amap" :zoom="zoom" class="amap-demo" :center="center" :amapManager="amapManager" :events="events"><el-amap-circle vid="circle" :center="center" :radius="100" fill-opacity="0.2" strokeColor="#38f"strokeOpacity="0.8" strokeWeight="1" fillColor="#38f"></el-amap-circle></el-amap></div></div>
</template><script>import {AMapManager} from "vue-amap"let amapManager = new AMapManager();export default {data() {let vm = this;return {zoom: 16,center: [121.329402, 31.228667],result: [],address: "",searchKey: '',amapManager,map: null,events: {init(o) {vm.map = o;}},};},watch: {map: function() {if (this.map != null) {this.initSearch();}}},//使用AMap.插件时，必须先去main.js注册methods: {initSearch() {var vm = this;var geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：truebuttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: false, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});this.map.addControl(geolocation);geolocation.getCurrentPosition(function(status, result) {if (status == 'complete') {vm.center = [result.position.lng, result.position.lat]}})},searchByHand() { //搜索var vm = this;if (this.searchKey != '') {var autoOptions = {city: '全国'}var autoComplete = new AMap.Autocomplete(autoOptions);autoComplete.search(vm.searchKey, function(status, result) {if (result.info == "OK") {vm.result = result.tips;}})}},checkAddress(item) { //选择搜索的项this.address = item.namethis.center = [item.location.lng, item.location.lat];}}}
</script><style scoped>.amap-page-container {height: 300px;position: relative;}.search-box {width: 90%;left: 5%;top: 10px;height: 30px;margin-bottom: 30px;}.search-box input {float: left;width: 80%;height: 100%;border: 1px solid #38f;padding: 0 8px;}.search-box button {float: left;width: 20%;height: 100%;background: #38f;border: 1px solid #38f;color: #fff;}
</style>

4、官方的AMapUI poi搜索(不需要的可忽略)

<template><div><button @click="initSearch">搜索</button><p>{{address}}</p><hr><div class="amap-page-container"><div class="search-box" v-if="toSearch"><input  v-model="searchKey"type="search"  id="search"><button @click="searchByHand">搜索</button><div class="tip-box" id="searchTip"></div></div><el-amap vid="amap" :zoom="zoom" class="amap-demo" :center="center":amapManager="amapManager":events="events"><el-amap-circle vid="circle":center="center" :radius="radius" fill-opacity="0.2"strokeColor="#38f"strokeOpacity="0.8"strokeWeight="1"fillColor="#38f"></el-amap-circle></el-amap></div><ul><li v-for="item in result" :key="item.id">{{item.name}}</li></ul></div>
</template><script>
import {AMapManager} from "vue-amap"let amapManager=new AMapManager();export default {data() {let vm = this;return {zoom:16,center: [121.329402,31.228667],result:[],address:"",radius:100,toSearch:false,searchKey:'',amapManager,map:null,poiPicker:null,events:{init(o){vm.map=o;}}};},watch:{map:function(){if(this.map!=null){//this.initSearch();}}},methods:{initSearch(){let vm=this;let map=this.amapManager.getMap();this.toSearch=true;AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {var poiPicker = new PoiPicker({input: 'search', //输入框idplaceSearchOptions: {map: map,pageSize: 10},//地点搜索配置suggestContainer:'searchTip',//输入提示显示DOMsearchResultsContainer:'searchTip'//搜索结果显示DOM});vm.poiPicker=poiPicker;//监听poi选中信息poiPicker.on('poiPicked', function(poiResult) {let source = poiResult.source;let poi = poiResult.item;if (source !== 'search') {poiPicker.searchByKeyword(poi.name);} else {poiPicker.clearSearchResults();vm.center=[poiResult.item.location.lng,poiResult.item.location.lat];vm.address=poi.name;vm.searchKey="";vm.toSearch=false;}});});},searchByHand(){if(this.searchKey!=''){this.poiPicker.searchByKeyword(this.searchKey);}}}};
</script><style scoped>.amap-page-container {height: 300px;position: relative;}.search-box{position: absolute;z-index: 5;width: 90%;left: 5%;top: 10px;height: 30px;}.search-box input{float: left;width: 80%;height: 100%;border: 1px solid #38f;padding: 0 8px;}.search-box button{float: left;width: 20%;height: 100%;background: #38f;border: 1px solid #38f;color: #fff;}.tip-box{width: 100%;max-height:260px;position: absolute;top: 30px;overflow-y: auto;background-color: #fff;}.toolbar{margin-top: 15px;}hr{border-color: red;border-style: dashed;}
</style>

备注：

1、使用高德的api注意事项：

先进行插件的注册，在main.j地图初始化中plugin写上要使用的api插件
api使用：这里例如定位api的使用

var geolocation = new AMap.Geolocation            //AMap.Geolocation就是main.js注册的插件
geolocation.getCurrentPosition(function(status, result) {if (status == 'complete') {vm.center = [result.position.lng, result.position.lat]}
})

Vue中使用高德地图相关推荐

vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...

Vue中使用高德地图

Vue中使用高德地图定位及poi搜索，以及其他插件的使用方法

1、第一步安装 npm install vue-amap --save

2、引入vue-amap

3、使用(自定义poi搜索及定位)

4、官方的AMapUI poi搜索(不需要的可忽略)

备注：

1、使用高德的api注意事项：

相关文档：

高德地图的api及参考示例可查看高德开放平台(地址如下)

Vue中使用高德地图相关推荐

最新文章

热门文章