Vue3前端项目加载使用腾讯地图

最新推荐文章于 2025-03-22 11:43:05 发布

子时不睡

最新推荐文章于 2025-03-22 11:43:05 发布

阅读量5.5k

点赞数 9

分类专栏： vue+ArcGIS 文章标签：前端 vue.js javascript 街景地图

本文链接：https://blog.csdn.net/weixin_45755816/article/details/122021261

版权

Vue3加载腾讯地图

一、加载地图
二、自定义地图
三、设置控件显示缩放级数
四、创建点的样式
五、点击标记点弹出信息窗
总的代码

前言：
最近要做一个有关地图的项目，以前想到用过腾讯地图api做过小程序，就打算用腾讯地图api和vue3项目结合。用腾讯地图开发api遇到一个小bug，代码没问题但是效果差了，后来想做不同标记进行不同的聚类，比较难实现。找资料的时候发现高德开放平台的地图api不错。如果项目也要用到地图的话，可以试试高德，可能是项目原因，个人感觉高德开放平台比较香。

回到正题
来个效果图：
在这里插入图片描述

首先注册和申请key
这个照着腾讯地图开发平台文档步骤做就行。

一、加载地图

1、在public文件下的index.html文件添加下面的代码

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

"key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"这里的key用自己的。
index.html整个代码：

<!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>地理服务系统</title>
  </head>
  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=73YBZ-UP63D-BI242-HSLGT-44P42-UAFB3&libraries=visualization"></script>
  <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 -->
  </body>
</html>

2、建一个MapTX.vue
首先要有一个初始化地图的函数initMap(),然后在生命钩子onMounted()中调用即可。在初始化函数中用window.TMap来创建地图中心center和地图map。注意是通过new window.TMap.

 const initMap = ()=>{
   
            //定义地图中心点坐标     
      var center = new window.TMap.LatLng(39.984120, 116.307484)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      
      var map = new window.TMap.Map(document.getElementById('container'), {
   
          center: center,//设置地图中心点坐标
          zoom: 7.2,   //设置地图缩放级别
          mapStyleId: 'style2', //设置地图样式  
      });

onMounted代码：

 onMounted(()=>{
   
      initMap()
    })

MapTX.vue代码：

<template>
  <div id="container"></div>
</template>
import {onMounted} from 'vue'
export default {
  setup () {    
    const initMap = ()=>{
            //定义地图中心点坐标     
      var center = new