html使用天地图写一个地图列表

一、效果图:

点击左侧地址列表,右侧地图跟着改变。

二、代码实现:

一进入页面时,通过body调用onLoad="onLoad()"函数,确保地图正常显示。

html 复制代码
<body onLoad="onLoad()">
					<!--左侧代码-->
					<div class="addressList">
							<div class="address_item"
								onclick="setCenterAndZoom(36.66416, 117.03215,'济南市历下区泉城路世茂广场东座商场三楼E370<br />Red Copper专柜 ')">
								<div class="name">济南世茂店</div>
								<div class="infobox">
									<img src="static/imgs/region@2x_1.png" />
									<div class="infos">济南市历下区泉城路世茂广场东座商场三楼E370<br />Red Copper专柜 </div>
								</div>
							</div>
							<div class="address_item"
								onclick="setCenterAndZoom(36.66637,117.1969,'济南市历城区经十路与凤鸣路交汇口(融创茂东门)L1层1032<br />Red Copper专柜')">
								<div class="name">济南融创店</div>
								<div class="infobox">
									<img src="static/imgs/region@2x_1.png" />
									<div class="infos">济南市历城区经十路与凤鸣路交汇口(融创茂东门)L1层1032<br />Red Copper专柜</div>
								</div>
							</div>
							<div class="address_item"
								onclick="setCenterAndZoom(39.9042, 116.4074,'济南市槐荫区经七纬十二路和谐银座七楼<br />Red Copper专柜 ')">
								<div class="name">济南和谐店</div>
								<div class="infobox">
									<img src="static/imgs/region@2x_1.png" />
									<div class="infos">济南市槐荫区经七纬十二路和谐银座七楼<br />Red Copper专柜 </div>
								</div>
							</div>
							......
						</div>
						
						<!--右侧代码-->
						<div class="imgbox" id="map"></div>
					
						<script type="text/javascript"
							src="http://api.tianditu.gov.cn/api?v=4.0&tk=此处填写自己申请的key值"></script>
						<script>
							var map;
							var zoom = 18;
							var marker;
	
							function onLoad() {
								//初始化地图对象
								map = new T.Map("map");
								//设置显示地图的中心点和级别
								map.centerAndZoom(new T.LngLat(117.02548, 36.66401), zoom);
	
								var lnglat = new T.LngLat(117.02548, 36.66401);
								//创建信息窗口对象
								var infoWin = new T.InfoWindow();
								infoWin.setLngLat(lnglat);
								//设置信息窗口要显示的内容
								infoWin.setContent("济南市历下区泉城路世茂广场东座商场三楼E370 Red Copper专柜");
								//向地图上添加信息窗口
								map.addOverLay(infoWin);
							}
	
							function setCenterAndZoom(lat, lng, name) {
								// var lng = document.getElementById("lng").value;
								// var lat = document.getElementById("lat").value;
								// var zoom = document.getElementById("zoom").value;
								map.centerAndZoom(new T.LngLat(lng, lat), zoom);
	
								let newMarker = map.getOverlays(); // 获取到了地图上的所有点
								// console.log(newMarker, 'newMarker');
								for (let i = 0; i < newMarker.length; i++) {
									map.removeOverLay(newMarker[i])
								};
	
								var lnglat = new T.LngLat(lng, lat);
								//创建信息窗口对象
								var infoWin = new T.InfoWindow();
								infoWin.setLngLat(lnglat);
								//设置信息窗口要显示的内容
								infoWin.setContent(name);
								//向地图上添加信息窗口
								map.addOverLay(infoWin);
							}
						</script>
</body>

ok~

相关推荐
魔云连洲4 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年7 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒13 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku20 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing25 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042726 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说29 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567033 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding1 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试