VUE2.0 插入腾讯地图(有经纬度和搜索功能以及标记’)

在Vue 2.0中插入腾讯地图,并包含经纬度、搜索和标记功能,可以通过以下步骤实现:

  1. 在项目中安装腾讯地图JavaScript SDK。



npm install qqmap -S
  1. 在Vue组件中引入腾讯地图SDK。



<template>
  <div id="map" style="width: 600px; height: 400px;"></div>
</template>
 
<script>
import { map } from 'qqmap'
 
export default {
  name: 'TencentMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      map.init({
        key: '你的腾讯地图key', // 必填
        // 初始化地图
        success: () => {
          let myLatlng = new qq.maps.LatLng(39.916527, 116.397128); // 默认经纬度
          let myOptions = {
            zoom: 12,
            center: myLatlng
          };
          let map = new qq.maps.Map(document.getElementById("map"), myOptions);
 
          // 搜索功能示例
          let searchService = new qq.maps.SearchService({
            map: map
          });
          let searchBtn = document.createElement('button');
          searchBtn.innerText = '搜索';
          searchBtn.onclick = () => {
            let searchKey = '你要搜索的地点';
            searchService.search(searchKey);
          };
          document.body.appendChild(searchBtn);
 
          // 标记点示例
          let marker = new qq.maps.Marker({
            position: myLatlng,
            map: map
          });
        }
      });
    }
  }
}
</script>
  1. 在你的Vue项目的index.html或对应的页面中添加腾讯地图的<script>标签。



<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的腾讯地图key"></script>

确保替换你的腾讯地图key为你从腾讯地图开放平台获取的API Key。

以上代码实现了在Vue组件中初始化腾讯地图,并在地图上设置了默认的经纬度。同时,添加了一个搜索按钮,点击后可以在地图上搜索指定的地点。最后,还添加了一个标记点,表示默认位置。

VUE
最后修改于:2024年08月27日 13:02

评论已关闭

推荐阅读

DDPG 模型解析,附Pytorch完整代码
2024年11月24日
DQN 模型解析,附Pytorch完整代码
2024年11月24日
AIGC实战——Transformer模型
2024年12月01日
Socket TCP 和 UDP 编程基础(Python)
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色?你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)
2024年11月24日
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
omegaconf,一个超强的 Python 库!
2024年11月24日
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
[超级详细]如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
Python 物理引擎pymunk最完整教程
2024年11月27日
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
深入了解 Taipy:Python 打造 Web 应用的全面教程
2024年11月26日
基于Transformer的时间序列预测模型
2024年11月25日
Python在金融大数据分析中的AI应用(股价分析、量化交易)实战
2024年11月25日
AIGC Gradio系列学习教程之Components
2024年12月01日
Python3 `asyncio` — 异步 I/O,事件循环和并发工具
2024年11月30日
llama-factory SFT系列教程:大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
Python 多线程和多进程用法
2024年11月24日
Python socket详解,全网最全教程
2024年11月27日