网站做好后，给网站调用地图坐标动态显示公司位置，方便客户在地图上查找你公司位置到公司洽谈业务。设置方法如下，详细教程请看账号里的对应视频
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>
在代码里，设置地图文件的绝对路径，调整显示的宽度和高度。
通过上面的设置，网站就可以调用百度地图坐标系统了，你也赶紧试试吧，很好玩的^_^
京公网安备 11010802035086号