vue3+ts中使用腾讯地图

1.在index.html中引入

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

2.初始化地图

  const dataMap = reactive({map: '',markerLayer: '',latitude: '', //纬度lngitude: '', //经度address: ''})const TMap = (window as any).TMap//初始化地图onMounted(() => {init()})//初始化地图const init = () => {let center = new TMap.LatLng('39.98412', '116.307484')dataMap.map = new TMap.Map(document.getElementById('amp-container'), {center: center, //设置地图中心点坐标zoom: 11, //设置地图缩放级别viewMode: '2D'})markerLayer() // 标记地图}

3.标记地图（坐标）

    //标记地图const markerLayer = () => {dataMap.markerLayer = new TMap.MultiMarker({map: dataMap.map, //指定地图容器//样式定义styles: {//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）myStyle: new TMap.MarkerStyle({width: 25, // 点标记样式宽度（像素）height: 35, // 点标记样式高度（像素）// "src": '../../assets/logo.png',  //图片路径background: 'pink',//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点anchor: { x: 16, y: 32 }})},//点标记数据数组geometries: [{id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此idstyleId: 'myStyle', //指定样式idposition: new TMap.LatLng(dataMap.latitude, dataMap.lngitude) //点标记坐标位置}]})}

4.关键词搜索(WebService API | 腾讯位置服务 (qq.com))

(1).需要配合el-autocomplete进行使用

<el-autocompletev-model="address":fetch-suggestions="querySearch"placeholder="请输入详细地址":trigger-on-focus="false"/>

（2).调用腾讯api(https://apis.map.qq.com/ws/place/v1/suggestion)

//搜索const querySearch = async (queryString: string, cb: any): Promise<any> => {try {let params = {keyword: queryString,key: '你的key'}let res = await keywordSearch(params)let { data } = resconst results = data.list.map((item: any) => {let obj = {value: item.address,address: item.address}return obj})cb(results)} catch (e) {console.log(e)}}//关键词搜索
export const keywordSearch = (params: keywordSearchList) => {return request.get({ url: '/api/v1/public/amap/qq/suggestion', params })
}

5.获取到地址进行解析

  // 获取搜索经纬度const getLocations = async () => {try {let params = {address: dataMap.address, //具体的地址key: '你的key' // 填申请到的腾讯key}let res = await addressResolution(params)let result = res.datadataMap.latitude = result.location.latdataMap.lngitude = result.location.lng;(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude))reloadMap()} catch (error) {console.log(error)}}//地址解析
export const addressResolution = (params: addressResolutionList) => {return request.get({ url: '/api/v1/public/amap/qq/geocoder', params })
}

6.重载地图

// 重载地图const reloadMap = () => {;(document.getElementById('amp-container') as any).innerHTML = ''dataMap.markerLayer = ''let center = new TMap.LatLng(dataMap.latitude, dataMap.lngitude)dataMap.map = new TMap.Map(document.getElementById('amp-container'), {center: center, //设置地图中心点坐标viewMode: '2D'})markerLayer()}

vue3+ts中使用腾讯地图相关推荐

vue3 + ts + vite3 使用腾讯地图api
使用腾讯地图api 1.0版本建议使用1.0版本,2.0版本目前好像是不够流畅的?. 开发文档地址: https://lbs.qq.com/webApi/javascriptGL/glGuide/g ...
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 ...
vue3+ts+echarts 实现svg渲染地图
vue3+ts+echarts 实现svg渲染地图+省市联动公司打算地图使用svg渲染,就做了个小demo,这是最后实现的效果. http://datav.aliyun.com/portal/sch ...
Vue3中使用腾讯地图
首先要到腾讯位置服务中创建应用和Key 帮助获取到key后在index.html中引入引入API库 <script src="https://map.qq.com/api/gljs? ...

vue3+ts中使用腾讯地图

vue3+ts中使用腾讯地图相关推荐

最新文章

热门文章