vue 腾讯地图展示用户定位附近的门店

yazhiShaw

已于 2022-07-28 13:55:01 修改

阅读量1.9k

点赞数 3

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

于 2022-07-27 15:39:34 首次发布

本文链接：https://blog.csdn.net/weixin_39357177/article/details/125989390

版权

本文介绍如何在Vue项目中利用腾讯地图API获取用户定位，并结合后端接口显示用户附近的门店。内容包括坐标系的讨论、地图选择原因、效果演示以及详细步骤，如地图容器创建、初始化、定位、标记门店等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本需求主要是获取用户当前定位，并将定位返回的经纬度坐标请求到后端接口，后端返回距离用户最近的门店，并且前端把门店标记在地图上。

关于坐标系

我们通常用经纬度来表示一个地理位置，但是由于一些原因，我们从不同渠道得到的经纬度信息可能并不是在同一个坐标系下。

高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系
百度地图使用的是BD-09坐标系
底层接口(HTML5 Geolocation或ios、安卓API)通过GPS设备获取的坐标使用的是WGS-84坐标系

地图选择

由于后端数据库保存的门店经纬度数据是爬取高德地图获得的，然而前端高德地图是需要收费才可使用，如果选择百度地图，就会出现坐标系不一致的问题，从而导致搜索附近门店结果不正确，需要对坐标进行转换，权衡之后最终选择了腾讯地图。

效果演示

一、引入js

目前腾讯官方并没有在npm上发布腾讯地图插件，所以咱还是参考官网用js引入的方法
index.html

二、创建一个地图容器

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

三、vue默认数据

data(){
   
  return {
   
    center:[lat: "23.168403",lng: "113.458454"], // 地图中心
    tMap:null, // 地图实例
    zoom:12, // 设置地图缩放级别
    markerArr: [], // 标记列表
    marker: "", // 覆盖物实例
    list:[] // 请求后端获取到的数据
  }
}

三、初始化地图容器

mounted() {
   
  this.tMap = new TMap.Map("container"

最低0.47元/天解锁文章