当前位置:首页 > 科技 >

如何在地图上显示自己的公司(如何在腾讯地图上显示自己的公司)

来源:原点资讯(www.yd166.com)时间:2023-05-11 01:30:45作者:YD166手机阅读>>

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

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>

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

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

栏目热文

免费地图标注公司地址(百度地图怎么标记地址和电话)

免费地图标注公司地址(百度地图怎么标记地址和电话)

第一步,打开百度地图,找到靠右边的“上报”,点击进去。第二步,找到“地点新增”,点击进去。第三步,填写公司或者店面名称。...

2023-05-11 01:30:36查看全文 >>

安卓bochs模拟器教程(bochs模拟器镜像文件下载)

安卓bochs模拟器教程(bochs模拟器镜像文件下载)

接上回我们在windows7上用qemu打包运行win98系统,这回带大家体验下用安卓手机运行电脑系统。目前根据小编的研...

2023-05-11 01:39:10查看全文 >>

bochs模拟器安装windows 7教程(bochs模拟器镜像文件下载)

bochs模拟器安装windows 7教程(bochs模拟器镜像文件下载)

  手机还可以安装Win10,这个操作太好了!很艳丽吗?实际上,您也可以操作手机上的win10系统,只要您有耐心,就可以...

2023-05-11 01:53:38查看全文 >>

bochs手机版模拟器使用教程(手机版bochs模拟器使用方法)

bochs手机版模拟器使用教程(手机版bochs模拟器使用方法)

文件说明:手机端的XP系统,您见过吗?没见过吧!没见过就对了!今天就让你见识一下手机端的XP系统-手机新玩法,让你的手机...

2023-05-11 01:51:53查看全文 >>

bochs模拟器怎么安装linux(bochs模拟器中文)

bochs模拟器怎么安装linux(bochs模拟器中文)

bochs简介可以将bochs理解成为一个虚拟化平台,它是一个完全虚拟化的软件。bochs与虚拟化产品VMware和Vi...

2023-05-11 01:40:34查看全文 >>

如何在微信地图上显示自己的店铺(微信定位里面怎样改自己店铺名字)

如何在微信地图上显示自己的店铺(微信定位里面怎样改自己店铺名字)

随着“小修小补”话题受到更广泛的关注全国首份“小修小补便民地图”3月23日已上线为了帮助修鞋、配钥匙等"小修小补"更好地...

2023-05-11 01:38:25查看全文 >>

cs参数最佳设置(cs1.6参数最佳设置)

cs参数最佳设置(cs1.6参数最佳设置)

相信很多csgo的玩家都希望能有一些干货能帮助自己更好的上分,所以经常能看到有朋友在下方评论,能不能多一些职业哥的参数,...

2023-05-11 01:15:52查看全文 >>

职业选手cs画面设置(cs画面怎样设置最好)

职业选手cs画面设置(cs画面怎样设置最好)

道理我们都懂,可是究竟该如何实操,有没有什么不管是新手还是老手都能受教的方法呢?其实还真有,那么今天我们首先就从基础游戏...

2023-05-11 01:15:33查看全文 >>

csgo最舒服的准星设置(csgo准星怎么设置舒服)

csgo最舒服的准星设置(csgo准星怎么设置舒服)

准星设置教学。为什么你的准星是这样的?不仅模糊而且还不明显,很容易在实战中丢失方向从而白。而大神玩家们的准星却是这样的,...

2023-05-11 01:20:55查看全文 >>

csgo怎么设置游戏公开(csgo个人游戏设置)

csgo怎么设置游戏公开(csgo个人游戏设置)

大家好,这里是cc聊游戏。日前B5更改了注册条件:CSGO真实游戏时长≥300小时的玩家才能够注册B5对战平台。但是ST...

2023-05-11 01:15:42查看全文 >>

文档排行