如何在高德地图windowInfo弹窗中使用VUE组件

项目中，使用高德地图的API，有个需求是在点击marker标记的时候，需要弹出windowInfo弹窗，然后弹窗中还有操作等

分析：

windowInfo中的content接口一组html字符串，但是如果有操作的话，还要动态的操作dom，写起来费劲不说，还很容易出bug

但是在vue.js 的API中有个el选项，可以获取到vue的dom等

有了这个属性，就可以使用vue组件加入到windowInfo中，然后弹窗方法和内容都写在弹窗组件中就可以了，方法如下

import BaseDeviceDetail from "@/components/baseDeviceDetail/BaseDeviceDetail";<script>components: {'base-device': BaseDeviceDetail},methods: {createInfoDom(infoWindow, item){let Content = Vue.extend({template: `<base-device :data="item"></base-device>`,name: 'DeiceDetail',data(){return {item: item}}});let component = new Content().$mount();infoWindow.setContent(component.$el);infoWindow.open(this.map, [+item.deviceLongitude, +item.deviceLatitude]);}}
</script>

这样写完了之后，发现报错，说我没有注册组件

注册组件应该放在VUE的实例中去才可以，如下

import BaseDeviceDetail from "@/components/baseDeviceDetail/BaseDeviceDetail";<script>methods: {createInfoDom(infoWindow, item){let Content = Vue.extend({template: `<base-device :data="item"></base-device>`,name: 'DeiceDetail',components: {'base-device': BaseDeviceDetail},data(){return {item: item}}});let component = new Content().$mount();infoWindow.setContent(component.$el);infoWindow.open(this.map, [+item.deviceLongitude, +item.deviceLatitude]);}}
</script>

如何在高德地图windowInfo弹窗中使用VUE组件相关推荐

纯干货！文字识别在高德地图数据生产中的演进
前言丰富准确的地图数据大大提升了我们在使用高德地图出行的体验.相比于传统的地图数据采集和制作,高德地图大量采用了图像识别技术来进行数据的自动化生产,而其中场景文字识别技术占据了重要位置.商家招牌上的 ...
揭秘！文字识别在高德地图数据生产中的演进
简介:丰富准确的地图数据大大提升了我们在使用高德地图出行的体验.相比于传统的地图数据采集和制作,高德地图大量采用了图像识别技术来进行数据的自动化生产,而其中场景文字识别技术占据了重要位置.商家招牌上的 ...
文字识别在高德地图数据生产中的演进
导读:丰富准确的地图数据大大提升了我们在使用高德地图出行的体验.相比于传统的地图数据采集和制作,高德地图大量采用了图像识别技术来进行数据的自动化生产,而其中场景文字识别技术占据了重要位置.商家招牌上的 ...
poi hssfcellstyle 文字方向_揭秘！文字识别在高德地图数据生产中的演进
简介:丰富准确的地图数据大大提升了我们在使用高德地图出行的体验.相比于传统的地图数据采集和制作,高德地图大量采用了图像识别技术来进行数据的自动化生产,而其中场景文字识别技术占据了重要位置.商家招牌上的 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
html中使用vue组件
VUE有两种使用方式,一种实在html中直接使用vue做开发,一种是企业级的单页面应用.后者是主流的使用方式,真正项目中很少使用前一种方式.原认为前一种方式主要作用是为了降低VUE的学习门槛--通过在 ...
antv/l7+高德地图+天气弹窗
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种. 1.引入map import { GaodeMap } from '@ ...
高德地图在https中打不开问题
今天解决了一个bug,页面中有高德地图,就是用https打开网址,打不开显示空白,但是用http可以打开,把地图部分去掉就可以正常打开. 将引入的文件改为https即可下面是引入的其中一个js: & ...
android高德地图获取海拔_在vue中使用高德地图开发，以及AMap的引入？
百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...

如何在高德地图windowInfo弹窗中使用VUE组件

如何在高德地图windowInfo弹窗中使用VUE组件相关推荐

最新文章

热门文章