1200字范文 > vue 使用高德地图（vue-amap）记录

vue 使用高德地图（vue-amap）记录

时间：2021-07-21 06:46:01

效果图

第一步

下载vue-amap依赖：

npm install vue-amap --save

高德地图ui：/demo/amap-ui/demos/amap-ui-pathsimplifier/simple-demo

第二步

在main.js里面导入vue-amap 并做相应的配置：

代码如下：

import VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({key: '16a302b5bbfb4ecd11a3738d9e6b3552', //申请的key码需要填写的地方，格式为长串字符数字plugin: [ //按照你的需要，引入地图的哪些功能，不需要下面这么多"AMap.Autocomplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑折线多，边形"AMap.CircleEditor", //圆形编辑器插件"AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置"AMap.ControlBar",'AMap.ToolBar','AMap.Driving','AMap.Geocoder'],v: '1.4.4', // 默认高德 sdk 版本为 1.4.4uiVersion: '1.0'})

第三步，写入组件.vue文件

<template><div class="container"><div class="search-box"><input v-model="searchKey" type="search" id="search" /><button @click="searchByHand">搜索</button><div class="tip-box" id="searchTip"></div></div><el-amapclass="amap-box":amap-manager="amapManager":vid="'amap-vue'":zoom="zoom":plugin="plugin":center="center":events="events"><el-amap-markerv-for="(marker, index) in markers":position="marker":key="index"></el-amap-marker><el-amap-polyline:path="polyline.path"strokeColor="red"strokeStyle="solid"strokeWeight="2"></el-amap-polyline></el-amap></div></template><script>import {AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";const amapManager = new AMapManager();export default {name: "cu-gaudMap",data() {let self = this;const that = this;return {address: null,searchKey: "",amapManager,markers: [],searchOption: {city: "全国",citylimit: true,},center: [121.329402, 31.228667],zoom: 17,lng: 0,lat: 0,loaded: false,events: {complete() {/*这个地方要注意this指向的问题，在这里this指向的是AMap这个实力，而并非Vue实例。所以要更改this的指向，即：const that = this*/that.getDriving();},init() {lazyAMapApiLoaderInstance.load().then(() => {self.initSearch();});},// 点击获取地址的数据click(e) {console.log(e);self.markers = [];let { lng, lat } = e.lnglat;self.lng = lng;self.lat = lat;self.center = [lng, lat];self.markers.push([lng, lat]);// 这里通过高德 SDK 完成。let geocoder = new AMap.Geocoder({radius: 1000,extensions: "all",});geocoder.getAddress([lng, lat], function (status, result) {if (status === "complete" && result.info === "OK") {if (result && result.regeocode) {console.log(result.regeocode.formattedAddress);self.address = result.regeocode.formattedAddress;self.searchKey = result.regeocode.formattedAddress;self.$nextTick();}}});},},polyline: {path: [[114.057939, 22.543527], //具体地址坐标[113.264499, 23.130061], //具体地址坐标],},// 一些工具插件plugin: [// {// pName: 'Geocoder',// events: {//init (o) {// console.log(o.getAddress())//}// }// },{// 定位pName: "Geolocation",events: {init(o) {// o是高德地图定位插件实例o.getCurrentPosition((status, result) => {if (result && result.position) {// 设置经度self.lng = result.position.lng;// 设置维度self.lat = result.position.lat;// 设置坐标self.center = [self.lng, self.lat];self.markers.push([self.lng, self.lat]);// loadself.loaded = true;// 页面渲染好后self.$nextTick();}});},},},{// 工具栏pName: "ToolBar",events: {init(instance) {console.log(instance);},},},{// 鹰眼pName: "OverView",events: {init(instance) {console.log(instance);},},},{// 地图类型pName: "MapType",defaultType: 0,events: {init(instance) {console.log(instance);},},},{// 搜索pName: "PlaceSearch",events: {init(instance) {console.log(instance);},},},],};},methods: {getDriving() {const map = this.amapManager.getMap();const driving = new AMap.Driving({map });const path = [{keyword: "广州" }, {keyword: "深圳" }]; //具体地址名driving.search(path, function (status, result) {console.log(status, "---", result);});},initSearch() {let vm = this;let map = this.amapManager.getMap();AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {var poiPicker = new PoiPicker({input: "search",placeSearchOptions: {map: map,pageSize: 10,},suggestContainer: "searchTip",searchResultsContainer: "searchTip",});vm.poiPicker = poiPicker;// 监听poi选中信息poiPicker.on("poiPicked", function (poiResult) {// console.log(poiResult)let source = poiResult.source;let poi = poiResult.item;if (source !== "search") {poiPicker.searchByKeyword(poi.name);} else {poiPicker.clearSearchResults();vm.markers = [];let lng = poi.location.lng;let lat = poi.location.lat;let address = poi.cityname + poi.adname + poi.name;vm.center = [lng, lat];vm.markers.push([lng, lat]);vm.lng = lng;vm.lat = lat;vm.address = address;vm.searchKey = address;}});});},searchByHand() {if (this.searchKey !== "") {this.poiPicker.searchByKeyword(this.searchKey);}},},};</script><style>.container {width: 700px;height: 500px;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);border: 1px solid #999;}.search-box {position: absolute;z-index: 5;width: 70%;left: 13%;top: 10px;height: 30px;}.search-box input {float: left;width: 80%;height: 100%;border: 1px solid #30ccc1;padding: 0 8px;outline: none;}.search-box button {float: left;width: 20%;height: 100%;background: #30ccc1;border: 1px solid #30ccc1;color: #fff;outline: none;}.tip-box {width: 100%;max-height: 260px;position: absolute;top: 30px;overflow-y: auto;background-color: #fff;}</style>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。