<返回更多

网站调用百度地图显示公司地址代码

2023-03-26    健哥有料
加入收藏

网站做好后,给网站调用地图坐标动态显示公司位置,方便客户在地图上查找你公司位置到公司洽谈业务。设置方法如下,详细教程请看账号里的对应视频

1、获取百度地图秘钥(AK)

百度地图开放平台网址是

https://lbsyun.bAIdu.com/

注册账号,点击“开发文档”--“JAVAScript API”--申请“个人开发者”,根据提示提交资料,注册账号。

在后台“应用管理”--“我的应用”--创建应用。在页面中的“应用类型”选择“浏览器端”,添加允许调用的网站域名,提交审核,获得密钥(AK)。

2、获取地址的经度和维度坐标

地图拾取坐标系统网址

http://api.map.baidu.com/lbsapi/getpoint/index.html

定位到公司具体地址,会自动出现该位置的经度和维度数值,保存该数值。

3、制作地图坐标页面

这里提供优化后的地图坐标显示效果代码,如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 适应移动端页面展示 -->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>网站调用地图坐标</title>
		<script type="text/JavaScript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您申请到的秘钥AK"></script>
		<style type="text/css">
			/* 设置容器样式 */
			#dituContent {
				height: 500px;
				width: 100%;
			}

			.mapContent {
				width: 240px;
				height: 100px;
				position: relative;
				top: -30px;
			}

			.BMap_bubble_content {
				overflow: visible !important;
			}

			.mapContent .title {
				width: 100%;
				font-size: 18px;
				color: #333;
				font-weight: 600;
			}

			.mapContent .main {}

			.mapContent .main p {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<!-- 地图容器 -->
		<div id="dituContent"> </div>
		<script type="text/javascript">
			var longitude = '117.307712'; //经度
			var latitude = '31.869903'; //纬度
			// 创建图文信息窗口
			var sContent = `
			<div class="mapContent">
				<div class="title">
					孙健工作室
				</div>
				<div class="main">
					<p>联系人:姓名</p>
					<p>联系方式:XXXXXX</p>
					<p>详细地址:公司所在地详细地址</p>
				</div>
			</div>`;
			// 创建地图实例
			var map = new BMapGL.Map("dituContent");
			// 设置中心点坐标
			var point = new BMapGL.Point(longitude, latitude);
			// 地图初始化,同时设置地图展示级别
			map.centerAndZoom(point, 18);
			//开启鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			// 创建添加点标记
			var marker = new BMapGL.Marker(point);
			map.addOverlay(marker);
			// 创建信息窗口对象
			var infoWindow = new BMapGL.InfoWindow(sContent);
			// 打开信息窗口
			map.openInfoWindow(infoWindow, map.getCenter());
			// marker添加点击事件
			marker.addEventListener('click', function() {
				this.openInfoWindow(infoWindow);
				// 图片加载完毕重绘infoWindow
				document.getElementById('imgDemo').onload = function() {
					infoWindow.redraw(); // 
				};
			})
		</script>
	</body>
</html>

把上面的代码复制下来,在自己电脑里,新建TXT文档,把该代码粘贴进去,修改代码里的“秘钥AK”、“经度”、“维度”为你的。

然后,名字可以命名为ditumap,把该文件的后缀txt,修改为html,名字全称就是ditumap.html,TXT文档就自动转换为网页文件了。

4、调用制作好的地图坐标网页

使用FTP软件,把文件上传到网站空间合适位置,并记住该路径。

进入网站管理后台,打开需要某个需要调用地图页面的文章,使用下面的iframe标签代码,远程调用地图文件。

<iframe style="border:none;" src="地图文件的绝对路径" width="100%" height="450px" frameborder="0" scrolling="no"></iframe>

在代码里,设置地图文件的绝对路径,调整显示的宽度和高度。

通过上面的设置,网站就可以调用百度地图坐标系统了,你也赶紧试试吧,很好玩的^_^

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>