点击坐标,弹出信息窗体内容用的是用js拼接html字符串
发现这样太不方便,对信息窗体内元素做操作很麻烦,而且内容只能用原生html拼接,我这里想在窗体里介入element元素和echarts图表怎么办
在vue2的时候有extend可以在点击地图坐标的时候手动挂载组件作为信息,Vue组件实现百度地图弹窗,Vue组件插入节点
vue3中extend被废除,Vue3.0中对Vue2.0全局API extend 的替代方案,不会搞o(╥﹏╥)o
然后想了个不太规范的方法,但要的效果已经能满足
<div id='mapDiv' style='width:100%; height:650px'></div> // 地图容器
// 自定义弹窗内容 可以使用html,element和echart等自定义
// 先flag=false隐藏 因为窗口内容是页面初始加载的,会显示在地图外
<div v-show="flag" ref="boxcontent">
<el-button type="primary" @click="showflag">111</el-button>
<echart :flag="flag"></echart>
</div>
// setup里
const map = ref()
const maps = () => {
map.value = new T.Map('mapDiv')
map.value.centerAndZoom(new T.LngLat(120, 30), 12)
map.value.enableDoubleClickZoom()
let point = new T.LngLat(120, 30)
marker.value = new T.Marker(point);
map.value.addOverLay(marker.value);
var markerInfoWin = new T.InfoWindow(proxy.$refs.boxcontent,
{maxWidth: 350, minWidth: 350,closeOnClick:true});
// 通过ref和$refs获取自定义的信息窗体dom,将他移植到天地图信息窗口里
marker.value.addEventListener("click", () => {
marker.value.openInfoWindow(markerInfoWin);
state.flag=true
});
}