1200字范文 > Vue中使用高德地图

Vue中使用高德地图

时间：2021-06-01 07:30:52

相关推荐

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]}})