在vue中使用腾讯地图

1. 引入腾讯地图

在 index.html 中插入

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

2. 引入TMap

在 build/webpack.base.conf.js 中引入 TMap，否则在使用时会报错

 externals: {TMap: 'TMap'}

3. 创建地图组件

3.1. 在 src/components中新建 tencent-map.vue 文件

3.2. 为地图创建容器

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

3.3. 实例化地图

import TMap from "TMap";
<script>data() {return {nowLat: 39.98412, // 纬度nowLng: 116.307484, // 经度map: null, // 地图对象}},created() {this.mapInit(this.nowLng, this.nowLat, 16)},methods: {/*** 根据传入的值渲染地图及传出经纬度和地名* @param lng 经度* @param lat 纬度* @param zoom 地图缩放级别*/mapInit(lng, lat, zoom) {let _this = this;// 在页面渲染完成后进行地图的实例化this.$nextTick(() => {_this.map = new TMap.Map(document.getElementById("container"), {// 地图的中心地理坐标。center: new TMap.LatLng(lat, lng),zoom: zoom});})},}
</script>

4. 使用地图组件

<template><div><t-map v-if="isMapShow" ref="tencentMap" @nowLocation="nowLocation"></t-map></div>
</template>
import tMap from "@/components/tencent-map";
<script>components: { tMap },data() {isMapShow: false,dataForm: {actLng: 0,actLat: 0}},activated() {this.init();},methods: {init() {this.$nextTick(() => {this.isMapShow = true;})},// 接收坐标位置的方法nowLocation(obj) {this.$set(this.dataForm, "actLng", obj.lng);this.$set(this.dataForm, "actLat", obj.lat);},}
</script>

在vue中使用腾讯地图相关推荐

vue中使用腾讯地图选择地址
腾讯地图选择地址引发的一系列问题 2019/12/14更新修复了自治区/直辖市无法选择的bug(比如上海之类的城市) 采用更加友好的方式来选择地址新的文章链接:vue中使用腾讯地图选择地址(二) ...
在vue中使用腾讯地图绘制围栏功能
首先,先看效果图里面包含了自定义多边形绘制围栏.圆形绘制以及矩形等方式,以及清除围栏经纬度的方法和获取围栏经纬度的方法. 首先在项目的index.html中引入腾讯地图 <script cha ...
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生命周期或者从后台接口获得信息后调用初始化地图方 ...
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析 1.创建应用 2.下载微信sdk包 3.安装`vue-jsonp` 4.使用获取当前位置信息,逆解析地址路线规划,距离计算实时搜索 ...
html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
vue中，应用mapbox地图（一）——mapbox-gl地图设置中文是zh-Hans不是zh accessToken-访问令牌正确版本streets-v11
vue中,应用mapbox地图(一)--mapbox-gl地图设置中文是zh-Hans不是zh & accessToken-访问令牌 & 正确版本streets-v11 Mapbox ...
vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图--地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 &am ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...

在vue中使用腾讯地图

1. 引入腾讯地图

2. 引入TMap

3. 创建地图组件

3.1. 在 src/components中新建 tencent-map.vue 文件

3.2. 为地图创建容器

3.3. 实例化地图

4. 使用地图组件

在vue中使用腾讯地图相关推荐

最新文章

热门文章