腾讯地图展示标记点位及自定义弹框，数据填充，右侧悬浮tab

完整代码：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />{include file="common/css_js" /}<link href="__CSS__/css.css?version={:time();}" rel="stylesheet" type="text/css" /><title>服务站点</title><style type="text/css">#container {/*地图(容器)显示大小*/width: 100%;height: 100%;position:relative;}.text-wrapper {word-break: break-all;word-wrap: break-word;white-space:normal !important;}</style><!--引入Javascript API GL，参数说明参见下文--><script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script></head><!-- 页面载入后，调用init函数 --><body><div id="app" style="height: 100%;" class="mapContent"><!-- 定义地图显示容器 --><div id="container"></div><ul class="mapIcon" v-if="isShowIcon"><li @click="showPopup"><img src="__IMG__/mapicon1.png" /><p>分类</p></li><li @click="jumpList"><img src="__IMG__/mapicon2.png" /><p>列表</p></li></ul><van-popup v-model="show" position="right" :style="{ height: '100%',width:'70%'}" @close="closePopup"><van-sidebar v-model="activeKey" @change="onChange"><van-cell-group><van-sidebar-item :title="`全部(${count})`"/></van-cell-group><van-cell-group v-for="(i,index) in tabList" :key="index"><van-sidebar-item :title="`${i.name}(${i.count})`"/></van-cell-group></van-sidebar></van-popup></div><script>var app = new Vue({el: '#app',template: ``,data() {return {show:false,isShowIcon:true,activeKey:0,tabList:[],address:'',typeid:0,count:0,   }},mounted(){this.getType()},methods: {getType(){axios({method:'get',url:`/site/typeList`,}).then(res => {const {list} = res.data.datathis.tabList = listthis.getList()})},getList(id){axios({method:'get',url:id?`/site/list_page?type_id=${id}&page_size=2000`:`/site/list_page`,}).then(res => {const {list,count} = res.data.datathis.count = countthis.initMapOpiton(list)})},showPopup(){this.getList()this.isShowIcon = falsethis.show = true},closePopup(){this.show = falsethis.isShowIcon = true},onChange(v){if(v===0){this.getList()}else{this.typeid = this.tabList[v-1].idthis.getList(this.typeid)}},jumpList(){window.location.href =`/site/sitemap`},initMapOpiton(list){var container = document.getElementById("container");document.getElementById("container").innerHTML = '';// var center = new TMap.LatLng(39.982914,116.307014);//设置中心点坐标var center = new TMap.LatLng(list[0].location_lat, list[0].location_lng);//设置中心点坐标//初始化地图var map = new TMap.Map(container, {center: center,disableDefaultUI: true });for(let key in list){var marker_ = 'marker_' + key//初始markermarker = new TMap.MultiMarker({id: 'marker-layer_' + key,map: map,styles: {"marker": new TMap.MarkerStyle({"width": 35,"height": 35,"anchor": { x: 12, y: 32 },"src": '__IMG__/marker.png'})},geometries: [{"id": 'demo_' + key,"styleId": 'marker',// "position": new TMap.LatLng(39.982914, 115.307014),"position": new TMap.LatLng(list[key].location_lat, list[key].location_lng),"properties": {"title": "marker"}}]});//初始化infoWindowvar infoWindow = 'infoWindow_' + keyinfoWindow = new TMap.InfoWindow({map: map,// position: new TMap.LatLng(39.984104, 116.307503),position: new TMap.LatLng(list[key].location_lat, list[key].location_lng),offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方});infoWindow.close(key);//初始关闭信息窗关闭//监听标注点击事件marker.on("click", function (evt) {//设置infoWindowinfoWindow.open(key); //打开信息窗infoWindow.setPosition(evt.geometry.position);//设置信息窗位置infoWindow.setContent('<div class="mapwin">'+'<div class="title">'+'服务站点'+'</div>'+'<div  class="wincon clearfix">'+'<a href="/site/detail?id='+list[key].id +'">'+' <div class="list_text"><p style="color:#fa6b01" class="text-wrapper" >名称：' + list[key].name + '</p>'+ ( list[key].tel ? ' <p ><span>电话：</span>' + list[key].tel + '</p>':'')+'<p class="cont"><span>地址：</span>' + list[key].address + '</p>'+'</div>'+' <div class="list_img"><img src="/static/index/images/' + list[key].img_url + ' "/></div>'+'</a>'+'</div>'+'</div>');//设置信息窗内容})}}}});</script></body>
</html>

页面截图：

腾讯地图展示标记点位及自定义弹框，数据填充，右侧悬浮tab相关推荐

element-ui 自定义弹框，加入图片
element 组件库里面有弹框组件. 实际项目中需要用到弹框.需求是在弹框的div里面放入一张图片. 用到的是element弹框组件的最后一个.自定义弹框组件 const h = this.$cre ...
一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
抖音短视频系统开发自定义弹框
我们如果想要实现这样的自定义弹框,需要怎么做呢,接下来就是教程首先,我们需要创建一个类继承Dialog 下面就是代码 import android.annotation.SuppressLint; ...
R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色（background color for a text annotation）
R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录
react离开页面，自定义弹框拦截，路由拦截
前言: 项目有个需求是:跳转路由,在离开页面前,需要弹框询问用户是否确定离开. 用react-router的<Prompt>组件是可以的,但是,怎么使用antd组件(或者说自定义组件)呢? ...
自定义弹框一（PopupWindow实现）响应两种点击事件
自定义弹框通常可以使用自定义的popupwindow,自定义的activity,自定义的dialog来实现这里先用popupwindow来实现并且可以在弹框上实现点击事件或者在其所依附的ac ...
android 系统弹框与自定义弹框
1. 系统弹框 private AlertDialog alertDialog; private void tipDialog(String value) { if (alertDia ...
关于讯飞语音听写RecognizerDialog 去除这个弹框view中的任何控件更改其中内容
| | | 上面这是讯飞语音听写sdk的听写弹框下面两张是自己项目中改的我发现他sdk的assets下的iflytek 中的recognize.xml 里面虽然是乱码但是可以看到的一些东西是此倾听 ...
jq js 自定义弹框
自定义弹框 <body> <script type="text/javascript" src="./js/jquery-1.8.3.js"& ...

腾讯地图展示标记点位及自定义弹框，数据填充，右侧悬浮tab

腾讯地图展示标记点位及自定义弹框，数据填充，右侧悬浮tab相关推荐

最新文章

热门文章