JS API 和 Vue 结合使用

准备

成为开发者并创建 key 为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

开发一个地图组件

NPM 安装 Loader

npm i @amap/amap-jsapi-loader --save

新建 MapContainer.vue 文件

在项目中新建 MapContainer.vue 文件,用作地图组件。

创建地图容器

在 MapContainer.vue 地图组件中创建 <div> 标签作为地图容器 ,并设置地图容器的 id 属性为 container。

<template>
  <div id="container"></div>
</template>

设置地图容器样式

<style scoped>
  #container{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 800px;
  }
</style>

引入JS API Loader

在地图组件 MapContainer.vue 中引入 amap-jsapi-loader

import AMapLoader from '@amap/amap-jsapi-loader';

初始化 Map

:::info 💡 在 Vue2 中使用 在 data 函数中不声明 map 对象,可以直接使用this.map赋值或者采用非响应式的普通对象来存储。 :::

💡 在 Vue3 中使用 首先需要引入 Vue3 的 shallowRef() 方法

import { shallowRef } from '@vue/reactivity'

在 setup() 函数中声明 map 对象

setup(){
  const map = shallowRef(null);
  return{
    map,
  }
},

创建地图

地图初始化函数 initMap()

methods:{
  initMap(){
    AMapLoader.load({
      key:"",             // 申请好的Web端开发者Key,首次调用 load 时必填
      version:"2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      plugins:[''],       // 需要使用的的插件列表,如比例尺'AMap.Scale'等
    }).then((AMap)=>{
      this.map = new AMap.Map("container",{  //设置地图容器id
        viewMode:"3D",    //是否为3D地图模式
        zoom:5,           //初始化地图级别
        center:[105.602725,37.076636], //初始化地图中心点位置
      });
    }).catch(e=>{
      console.log(e);
    })
  },
},

调用地图初始化函数:mounted 函数会在 DOM 初始化完成后调用,建议在 mounted 函数中调用地图初始化方法。

mounted(){
  //DOM初始化完成进行地图初始化
  this.initMap();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 Node.js 的 MySQL 模块来连接 MySQL 数据库,并使用 Vue.js 来构建前端界面。以下是一个简单的示例代码: ``` // 引入 MySQL 模块 const mysql = require('mysql'); // 创建连接池 const pool = mysql.createPool({ host: 'localhost', user: 'root', password: 'password', database: 'mydatabase' }); // 查询数据 pool.query('SELECT * FROM mytable', (error, results, fields) => { if (error) throw error; console.log(results); }); // 插入数据 pool.query('INSERT INTO mytable (name, age) VALUES (?, ?)', ['John', 25], (error, results, fields) => { if (error) throw error; console.log(results); }); ``` 在前端界面,你可以使用 Vue.js 的组件来显示数据,并使用 axios 或者其他 HTTP 库来与后端进行通信。以下是一个简单的示例代码: ``` <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }} - {{ item.age }}</li> </ul> <form @submit.prevent="submitForm"> <input v-model="name" type="text" placeholder="Name"> <input v-model="age" type="number" placeholder="Age"> <button type="submit">Submit</button> </form> </div> </template> <script> import axios from 'axios'; export default { data() { return { items: [], name: '', age: '' }; }, mounted() { axios.get('/api/mytable').then(response => { this.items = response.data; }); }, methods: { submitForm() { axios.post('/api/mytable', { name: this.name, age: this.age }).then(response => { this.items.push(response.data); this.name = ''; this.age = ''; }); } } }; </script> ``` 当然,这只是一个简单的示例,实际上你需要更多的代码来处理错误、验证输入等。希望这可以帮助你入门。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值