Vue Web开发（十二）

雪芽蓝域zzs

于 2024-12-21 21:19:06 发布

阅读量514

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vueWeb 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_36158551/article/details/144628546

vueWeb 专栏收录该内容

13 篇文章

订阅专栏

1. vue调用高德地图Web端JS API

首先要在高德开放平台获取key，进入高德地图官网链接: https://lbs.amap.com/。

1.1. 创建应用

登录高德地图账号,选择应用管理-我的应用-添加
在这里插入图片描述
其中要选择Web端（JS API）,Web服务是不一样的。

然后在public文件夹下的index.html的body中添加

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

接着就可以在页面使用了

<template>
    <div id="amap-container">
    </div>
</template>
 
<script>
export default {
  name: "PathPlanning",
  mounted: function () {
    this.init();
  },
  methods: {
    init: function () {
      var map = new AMap.Map("amap-container", {
        //地图中心位置
        center: [116.397428, 39.90923],
        resizeEnable: true,
        //地图层级
        zoom: 10,
      });
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function () {
        //地图缩放移动工具
        map.addControl(new AMap.ToolBar());
        //地图比例尺
        map.addControl(new AMap.Scale());
      });
    },
  },
};
</script>

<style lang="less" scoped>
.amap-container {
   height: 100%;
   width: 100%;
}
</style>

src/views/myAmap/index.vue代码

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=12658f42b7"></script>

  </body>
</html>

在这里插入图片描述

2. 用户详情

点击用户列表进入详情页面。
在src/views/userDetail文件夹下建index.vue文件
在这里插入图片描述
在src/components/CommonAside.vue添加详情点击事件

     <el-button size="mini" type="primary"
            @click="handleDetail(scope.row)">详情
    </el-button>

  handleDetail(row) {
                console.log(row)
                this.$router.push('/userDetail').catch(err => {
                    console.log("err:", err)
                })
            },