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

最新推荐文章于 2023-12-01 15:31:52 发布
程序媛_panpan
最新推荐文章于 2023-12-01 15:31:52 发布
阅读量1.4k
点赞数
分类专栏：原生JavaScript vant ui 地图文章标签： javascript 前端 vue.js
本文链接：https://blog.csdn.net/weixin_46186815/article/details/127101838
版权
原生JavaScript 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
vant ui
3 篇文章 0 订阅
订阅专栏
地图
1 篇文章 0 订阅
订阅专栏
完整代码：
<!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.data
                            this.tabList = list
                            this.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.data
                            this.count = count
                            this.initMapOpiton(list)
                        })
					},
                    showPopup(){
                        this.getList()
                        this.isShowIcon = false
                        this.show = true
                    },
                    closePopup(){
                        this.show = false
                        this.isShowIcon = true
                    },
                    onChange(v){
                        if(v===0){
                            this.getList()
                        }else{
                            this.typeid = this.tabList[v-1].id
                        this.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
                            //初始marker
                            marker = 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"
                                    }
                                }]
                            });
                            //初始化infoWindow
                            var infoWindow = 'infoWindow_' + key
                            infoWindow = 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) {
                                //设置infoWindow
                                infoWindow.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>