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

Vue导入高德地图(一)

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

第一步创建高德地图key

高德开放平台官网

在这里插入图片描述
在这里插入图片描述

这个就是自己申请的key

在这里插入图片描述

第二步:下载vue-amap

  • npm install vue-amap --save//去到自己项目目录先安装,如果不行用cnpm

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

  • import AMap from 'vue-amap';
  • Vue.use(AMap);
  • // 初始化vue-amap
  • AMap.initAMapApiLoader({
  • // 高德key
  • key: '你的key', //注意这里引入你在高德申请的key值
  • // 插件集合 (插件按需引入)
  • plugin: ['AMap.Geolocation']
  • });

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

这是我的目录:

在这里插入图片描述
  • <template>
  • <div id='map'>
  • <div class='amap-page-container'>
  • <div class='toolbar'>当前坐标: {{ lng }}, {{ lat }}</div>
  • <el-amap
  • vid='amapDemo'
  • :center='center'
  • :zoom='zoom'
  • :plugin='plugin'
  • class='amap-demo'
  • :events='events'
  • pitch-enable='false'
  • >
  • <el-amap-marker
  • v-for='(marker,index) in markers'
  • :key='index'
  • :events='marker.events'
  • :position='marker.position'
  • />
  • <el-amap-info-window
  • v-if='window'
  • :position='window.position'
  • :visible='window.visible'
  • :content='window.content'
  • :offset='window.offset'
  • :close-when-click-map='true'
  • :is-custom='true'
  • >
  • <div id='info-window'>
  • <p>{{ window.address }}</p>
  • <div class='detail' @click='checkDetail'>查看详情</div>
  • </div>
  • </el-amap-info-window>
  • </el-amap>
  • </div>
  • </div>
  • </template>
  • <script>
  • export default {
  • name: 'Clock_in',
  • data: function () {
  • const self = this;
  • return {
  • data: [
  • {
  • position: '108.234508, 22.840492',
  • address: 'A地址'
  • },
  • {
  • position: '108.376028, 22.766875',
  • address: 'B地址'
  • }
  • ],
  • zoom: 10,
  • center: [108.35458, 22.808541], // 地图中心位置
  • markers: [],
  • windows: [],
  • window: '',
  • events: {
  • click (e) {
  • const { lng, lat } = e.lnglat;
  • self.lng = lng;
  • self.lat = lat;
  • }
  • },
  • lng: 0, // 初始化显示位置
  • lat: 0, // 初始化显示位置
  • plugin: [
  • {
  • pName: 'DistrictSearch',
  • events: {
  • init (o) {
  • console.log(o);
  • }
  • }
  • },
  • {
  • // 定位
  • 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)
  • }
  • }
  • }
  • ]
  • };
  • },
  • mounted () {
  • this.point();
  • },
  • methods: {
  • point () {
  • const markers = [];
  • const windows = [];
  • const that = this;
  • this.data.forEach((item, index) => {
  • markers.push({
  • position: item.position.split(','),
  • // icon:item.url, //不设置默认蓝色水滴
  • events: {
  • click () {
  • // 方法:鼠标移动到点标记上,显示相应窗体
  • that.windows.forEach((window) => {
  • window.visible = false; // 关闭窗体
  • });
  • that.window = that.windows[index];
  • that.$nextTick(() => {
  • that.window.visible = true;
  • });
  • }
  • }
  • });
  • windows.push({
  • position: item.position.split(','),
  • isCustom: true,
  • offset: [115, 55], // 窗体偏移
  • showShadow: false,
  • visible: false, // 初始是否显示
  • address: item.address
  • });
  • });
  • // 加点
  • this.markers = markers;
  • // 加弹窗
  • this.windows = windows;
  • },
  • checkDetail () {
  • alert('点击了查看详情');
  • }
  • }
  • };
  • </script>
  • <style scoped>
  • .amap-demo {
  • height: 120vh;
  • }
  • .amap-page-container {
  • position: relative;
  • }
  • #info-window {
  • width: 211px;
  • height: 146px;
  • margin-left: 30px;
  • background: rgba(255, 255, 255, 0.9);
  • border-radius: 4px;
  • position: relative;
  • overflow: hidden;
  • }
  • .detail {
  • width: 100%;
  • height: 24px;
  • color: #fff;
  • background-color: #1a73e8;
  • position: absolute;
  • bottom: 0;
  • font-size: 12px;
  • line-height: 24px;
  • text-align: center;
  • cursor: pointer;
  • }
  • </style>

可能你会碰到一些小问题,你可以在.eslintrc.js添加

  • globals: {
  • 'AMap': true
  • }

还有版本二请看下这篇文章.

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