vue制作腾讯地图组件

基于jeecgboot前端框架制作。

.env文件中加入变量定义：

VUE_APP_MAP_KEY= 你的key

项目中config文件夹中的index.js中增加一个变量，引用这个key

//腾讯地图key
window._CONFIG['qqMapKey'] = process.env.VUE_APP_MAP_KEY

index.html中增加腾讯地图的js文件引用

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

地图组件：

<template><j-modal:title="title":width="width":visible="visible"switchFullscreen@ok="handleOk"@cancel="handleCancel"cancelText="关闭"><div id="container"></div></j-modal>
</template><script>
export default {name: "TencentMap",props: {coordinate: {type: Object,default: () => {return {lat: '',lng: ''}}}},data() {return {title: '设置地点',width: 1000,visible: false,markerLayer: {},markerId: 'marker',location: this.coordinate}},methods: {getMyLocation() {const KEY = window._CONFIG['qqMapKey']let url = 'https://apis.map.qq.com/ws/location/v1/ip'this.$jsonp(url, {key: KEY,output: 'jsonp'}).then(json => {this.location.lat = json.result.location.lat;this.location.lng = json.result.location.lng;this.initMap()}).catch(error => {this.$message.error('定位失败')})},initMap() {let center = new TMap.LatLng(this.location.lat, this.location.lng)let map = new TMap.Map(document.getElementById('container'), {center: center,zoom: 17.2,   //设置地图缩放级别pitch: 0,  //设置俯仰角rotation: 0    //设置地图旋转角度});this.markerLayer = new TMap.MultiMarker({id: 'marker-layer',map: map,})map.on('click', (evt) => {this.location.lat = evt.latLng.latthis.location.lng = evt.latLng.lngthis.markerLayer.remove(this.markerId) //移除旧的标记this.markerLayer.add({id: this.markerId,position: new TMap.LatLng(this.location.lat, this.location.lng)})})if (this.location.lat) {this.markerLayer.add({id: this.markerId,position: new TMap.LatLng(this.location.lat, this.location.lng)})}},handleCancel() {this.visible = false},handleOk() {this.$emit('onSel', this.location)this.visible = false},open(location) {if (location && JSON.stringify(location) != "{}") {this.location = location}this.visible = truethis.$nextTick(() => {if (!this.location.lat) {this.getMyLocation()} else {this.initMap()}})}}
}
</script><style scoped></style>

使用：

<tencent-map ref="map" @onSel="selLocation"></tencent-map>import TencentMap from "@comp/map/TencentMap";components: {TencentMap},this.$refs.map.open()  //打开窗口，未传入坐标，将使用ip进行定位，并在地图上标记，ip定位并不准确，不过距离实际的位置不会太远，都在一个城市内this.$refs.map.open({lat:35.21406841039809  ,lng:113.2474249152092}) //打开窗口，传入坐标，将在这个坐标上标记selLocation(location){console.log(location)}

vue制作腾讯地图组件相关推荐

vue 集成腾讯地图基础api Demo集合
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记) 写作背景 .之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大 ...
Vue引入腾讯地图（搜索获取定位）
效果: 申请腾讯地图 1.首先进入腾讯位置服务登陆/注册,地址:https://lbs.qq.com/ 2.进入控制台,点击左侧菜单应用管理-我的应用,点击右上方创建应用,填写内容如下 WebServ ...
vue h5 腾讯地图路线规划
vue h5腾讯地图定位传送门代码如下:在微信浏览器中会弹出是否打开第三方点击取消则打开内置腾讯点击去则跳转腾讯地图app location.href = https://apis.map.q ...
移动端vue实现部门结构功能_基于Vue制作组织架构树组件
编程之家收集整理的这篇文章主要介绍了基于Vue制作组织架构树组件,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vu ...
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
vue 调用腾讯地图 https://apis.map.qq.com/ws/place/v1/suggestion/
vue 调用腾讯地图 1.先安装依赖 npm install jsonp 2. 新建一个jsonp.js 文件 3. 以下代码放到jsonp.js文件里 exports.install = funct ...
vue 图片剪辑_用vue制作的图片剪辑组件
vue 图片剪辑形状 (vueShapeImg) Picture clipping component made with vue. 用vue制作的图片剪辑组件. View demo 查看演示 Do ...
vue接入腾讯地图(二)【标注定位实战】
vue接入腾讯地图(一)[点击事件]请参考: https://blog.csdn.net/weixin_45628602/article/details/108401673 1.[标注] 添加标注 v ...
Vue 引入腾讯地图 API 与实际应用保姆级分享
背景: 需求是大屏要加一个地图板块,同时把获取到的企业信息根据经纬度展示在地图中,并且要求鼠标悬浮打开企业信息的详细信息面板文章目录引入第三方地图组件库页面引入并初始化地图控件显示控制 DOM ...

vue制作腾讯地图组件

vue制作腾讯地图组件相关推荐

最新文章

热门文章