Vue3中使用腾讯地图

首先要到腾讯位置服务中创建应用和Key

帮助

获取到key后在index.html中引入引入API库

<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script>

在组件中使用

主要代码：

<template><div class="c-main">....<div class="mapbox mt-20"><div class="map" id="tx_map_d"></div></div></div>
</template>const TMap = (window as any).TMap;const initMap = () => {let center = new TMap.LatLng(dataMap.latitude, dataMap.lngitude);dataMap.map = new TMap.Map('tx_map_d', {center: center,zoom: 11,viewMode: '2D',});// 绑定地图点击获取地理位置事件(dataMap.map as any).on('click', clickHandler);// 标记地图markerLayer();
};

使用腾讯地图api:

解决跨域问题：

export default ({ mode }) =>defineConfig({...server: {port: 8080,hmr: true,proxy: {'/ws': {target: 'https://apis.map.qq.com',changeOrigin: true,},},},...});

然后使用axios封装api请求

export const getAddress = (data: any) => {return request({method: 'get',url: `/ws/geocoder/v1/?address=${data.address}&key=${data.key}`,});
};

页面引入使用

let params = {key: keys, // 填申请到的腾讯keyaddress: address.value,
};
let { result } = await getAddress(params);
if (result) {...
}

腾讯地图api

效果：

项目预览地址： http://www.yyyi1.cn/vitets/map

Vue3中使用腾讯地图相关推荐

vue3 中使用腾讯地图
本来用百度就很方便,结果客户要求... 折腾了一天,特别记录一下. 首先构建需要的环境vue.axios.element-plus等然后再publuc下引入腾讯地图的链接 src="htt ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
vue中使用百度地图为啥是空白_vue中使用腾讯地图（尝试篇）
引入在index.html文件中引入腾讯地图js文件,XXX为你申请的key 注意事项:为显示地图的元素设置宽高单个标注点 js: 在mounted生命周期或者从后台接口获得信息后调用初始化地图方 ...
html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
vue中使用腾讯地图选择地址
腾讯地图选择地址引发的一系列问题 2019/12/14更新修复了自治区/直辖市无法选择的bug(比如上海之类的城市) 采用更加友好的方式来选择地址新的文章链接:vue中使用腾讯地图选择地址(二) ...
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析 1.创建应用 2.下载微信sdk包 3.安装`vue-jsonp` 4.使用获取当前位置信息,逆解析地址路线规划,距离计算实时搜索 ...
在vue中使用腾讯地图绘制围栏功能
首先,先看效果图里面包含了自定义多边形绘制围栏.圆形绘制以及矩形等方式,以及清除围栏经纬度的方法和获取围栏经纬度的方法. 首先在项目的index.html中引入腾讯地图 <script cha ...
微信小程序中使用腾讯地图，导航到目的地
1.效果图如下:(点击地图可导航,从用户当前位置到目的地) 2. wxml文件中 (1)目标地址location  <view class='loc'>& ...
android+腾讯地图h5,在uniapp H5项目中使用腾讯地图sdk
这里主要针对的是H5,小程序或app都有现成的sdk可以使用: 本人是用uniapp在做微信公众号的h5页面,其中需要把经纬度信息转化成文字描述的位置信息,在腾讯地图开发平台上申请了一个key,然后下 ...

Vue3中使用腾讯地图

Vue3中使用腾讯地图相关推荐

最新文章

热门文章