2025年2月3日 星期一 甲辰(龙)年 腊月初三 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

Vue导入高德地图(二)

时间:02-22来源:作者:点击数:17

前言

这里已经实现Vue导入高德地图(一)的前面两步。这个demo是增加搜索功能,卫星地图,路况以及路径。

Vue导入高德地图(一)

第一步:在项目main.js引入vue-amap

  • // 初始化vue-amap
  • AMap.initAMapApiLoader({
  • // 高德key
  • key: '你的key值',//注意这里引入你在高德申请的key值
  • // 插件集合 (插件按需引入)
  • // plugin: ['AMap.Geolocation', 'AMap.MouseTool']
  • plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
  • v: '1.4.4',
  • uiVersion: '1.0'
  • });

第二步:在components下,自己定义的.vue页面调用api

  • <template lang="html">
  • <div style="width:100%;height:800px;">
  • <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 class='toolbar'>当前坐标: {{ lng }}, {{ lat }}</div>
  • </div>
  • <!--
  • amap-manager: 地图管理对象
  • vid:地图容器节点的ID
  • zooms: 地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
  • center: 地图中心点坐标值
  • plugin:地图使用的插件
  • events: 事件
  • -->
  • <el-amap class="amap-box"
  • :amap-manager="amapManager"
  • :vid="'amap-vue'"
  • :zoom="zoom"
  • :plugin="plugin"
  • :center="center"
  • :events="events"
  • >
  • <!-- 标记 -->
  • <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
  • </el-amap>
  • </div>
  • </div>
  • </template>
  • <script>
  • import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
  • let amapManager = new AMapManager();
  • export default {
  • data () {
  • let self = 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: {
  • 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();
  • }
  • }
  • });
  • }
  • },
  • // 一些工具插件
  • 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]);
  • // load
  • self.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: {
  • 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 lang="css">
  • .container {
  • width: 100%;
  • height: 100%;
  • position: relative;
  • left: 50%;
  • top: 50%;
  • transform: translate3d(-50%, -50%, 0);
  • border: 1px solid #999;
  • }
  • .search-box {
  • position: absolute;
  • z-index: 5;
  • width: 30%;
  • 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>

效果图:

在这里插入图片描述

期间你可能会遇到"AMapUI is not defined"

暂时想到的办法是:在.eslintrc.js添加

  • globals: {
  • 'AMap': false,
  • 'AMapUI': false
  • }
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门