《前端攻城狮 · Vue 使用腾讯地图》

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗

🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数,欢迎多多交流。👍

文章目录

写在前面的话

本篇文章介绍如何在Vue项目中使用腾讯地图API。

获取腾讯地图 API 密钥

  1. 登录 腾讯地图开放平台,注册并创建一个应用。
  2. 获取 API 密钥(Key)。

引入腾讯地图 API

public/index.html 文件中引入腾讯地图的 JavaScript API。将以下代码添加到 <head> 标签中:

html 复制代码
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>

创建地图组件

在 src/components 目录下创建一个新的组件,例如 MapComponent.vue:

vue 复制代码
<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  name: 'MapComponent',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new qq.maps.Map(document.getElementById("map"), {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 设置地图中心点
        zoom: 10 // 设置缩放级别
      });
    }
  }
}
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>

使用地图组件

在 src/App.vue 或其他父组件中使用 MapComponent:

vue 复制代码
<template>
  <div id="app">
    <h1>腾讯地图示例</h1>
    <MapComponent />
  </div>
</template>

<script>
import MapComponent from './components/MapComponent.vue';

export default {
  name: 'App',
  components: {
    MapComponent
  }
}
</script>

<style>
/* 你可以在这里添加样式 */
</style>

实现效果

总结陈词

💗 后续会逐步分享企业实际开发中的实战经验,有需要交流的可以联系博主。

相关推荐
Y学院5 分钟前
vue的组件通信
前端·javascript·vue.js
PairsNightRain8 分钟前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
小岛前端22 分钟前
React 剧变!
前端·react.js·前端框架
teeeeeeemo33 分钟前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
Greg_Zhong38 分钟前
vue项目安装使用,npm、webpack版本问题注意
vue.js·npm版本、webpack版本
岁月宁静1 小时前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
小小弯_Shelby1 小时前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒1 小时前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端
加洛斯2 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
kunge1v52 小时前
学习爬虫第三天:数据提取
前端·爬虫·python·学习