vue+腾讯地图标记弹框

腾讯地图添加自定义标记

首先要加载腾讯地图

 var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标//初始化地图var map = new TMap.Map("container", {center: center});

然后创建事件

        var markerLayer = new TMap.MultiMarker({id: 'marker-layer',map: map});

监听点击事件添加marker

        map.on("click", (evt) => {markerLayer.add({position: evt.latLng});                      });

以上是给腾讯地图添加标记，map与marker建议定义为一个全局变量，在首次加载的时候就加载出来

然后如何点击标记弹出对话框，并在鼠标移动到

首先需要定义一个信息框

 this.infoWindow = new TMap.InfoWindow({map: window.Map,position: new TMap.LatLng(39.984104, 116.307503),offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素enableCustom: true,content: '<div id="info_card"></div>',});

这是一个自定义的弹框
然后给弹框加样式

#info_card {position: relative;width: 280px;height:260px;background-color: #c7c9c8;
}

现在就可以弹出框了，但是腾讯地图原生的content类型为string 所以无法直接引用vue组件

所以需要我们在添加标记的时候通过id获取当前标记并将vue组件追加到标记中
首先我们想显示自定义组件要创建自己的组件并将组件引用到当前放有地图的主页面中

import InfoWindow from '@/components/InfoWindow/index.vue'

components: {'info-window': InfoWindow //弹框用子组件包裹},

        <info-window ref="infoWindow" />

然后在添加标记的时候，监听click事件，当点击的时候添加弹出框

addWindow() {var that = this;//监听标注点击事件if (that.infoWindow == null) {that.windowInfo();that.infoWindow.close();that.userMarkerContainer.on("click", function (evt) {if (!that.isAddMarker) {that.createInfoDom(evt)document.getElementById("info_card").append(that.$refs.infoWindow.$el)that.$refs.infoWindow.initialize({evt: evt});}})that.userMarkerContainer.on("mouseover", this.onSelfMarkerMouseover);that.userMarkerContainer.on("mouseout", this.onSelfMarkerMouseout);}},

添加点击，鼠标移动到，鼠标移出事件，并通过$refs传递参数，这样我们就可以在弹框中编辑我们的信息了
组件中的数据我们就可以和后端自由交互了

弹出框完成之后但是鼠标单击双击按下等事件会因为点击弹出框，会联动后面地图的鼠标事件
所以为了解决事件继续传播的问题需要在组件最外围标签中事件停止传播

<div @click.stop="stopEventSpread" @mousedown.stop="stopEventSpread" @dblclick.stop="stopEventSpread">

stopEventSpread方法不做任何处理
这样就完成了腾讯地图上的标记，弹出框与vue组件的完美契合

vue+腾讯地图标记弹框相关推荐

解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈
前端Vue分享菜单按钮弹框.微博分享.QQ分享.微信好友.朋友圈 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13085 效 ...
if vue 跳出_vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展. v-if 是直接删除dom节点, 就是这 ...
vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽
一,子组件 modalConfirm.vue 文件封装 <template><div class="confirmBgc animations" :style=& ...
springboot+websocket+vue实现订单全局弹框推送提醒（简单广播）
写在跟vue下可以全局推送不配置拦截器在这个vue下指向有问题需要var that = this 概念性东西就不阐述了,直接实操一下. 在做一个项目的过程中,有遇到这样的想法,所以记录一下 ...
Vue 自定义一个全局弹框组件
前文:其实element ui有提供this.$mesage和this.$notify弹框组件可供使用,但是我们的ui设计的样式以及布局还是不完全一样的,为了达到100%的呈现效果,所以自己写了一个全 ...
Vue+ElementUI中 el-dialog弹框蒙层问题
开发项目时页面中用到了2个<el-dialog></el-dialog>弹框(或者是dialog中再嵌套dialog),会出现2个灰色蒙版层叠加,需要再点一下蒙层才会消失. ...
VUE+Element中eldialog弹框控制最小宽度
<template><div><div><el-button @click="dialogFormVisible=true">打开& ...
vue---安装使用vue-layer弹框插件
vue安装使用vue-layer弹框插件步骤 (1)安装vue-layer npm install --save vue-layer (2)在[src]目录下的[main.js]中引入vue-laye ...

vue+腾讯地图标记弹框

腾讯地图添加自定义标记

vue+腾讯地图标记弹框相关推荐

最新文章

热门文章