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

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

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

百度地图开放平台网址是

***/

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

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

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

地图拾取坐标系统网址

***/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="***/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>

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

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

本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023-08-26 12:54
下一篇 2023-08-26 13:22

相关推荐

  • 快手商家提现怎么更改支付宝账号

    快手小店要如何修改提现银行卡/支付宝账号?规则有哪些?相信这是不少商家在店铺运营中经常会遇到的问题,本次我们就用下文为您解答: 一、修改提现银行卡/支付宝账号的规则 仅限对该主体下…

    2023-02-06
  • 旧手机提取黄金技术,旧手机提取黄金的方法

    黄金不仅可以用于奢饰品行业,电子产品中也要使用黄金,主要是PCB电路需要,那废旧手机提取黄金岂不是一本万利的生意?现在还有网友真的去尝试了,结果一大堆电路板也只提取出0.41克黄金…

    2023-04-22
  • 小米手机怎样微信双开

    小米手机是国产手机中的一股清流,自崛起之后就一直活跃在手机界的前线,它的功能很多,手机分身、语音助手等,不过本期要给大家分享的小技巧是:小米手机微信双开。 许多人有两个微信号,但是…

    2023-12-10
  • 智能手机的像素(vivo x80 pro像素密度)

    这么多年以来大家坚信的,中心思想依然是乔布斯的出色壮举,然如今现在他已经不在了。苹果还会有新品中国苹果依然还在继续蔓延,作为新的领头人库克船思考的产品会跟乔布斯相同吗。用户很渴望能…

    2023-06-04
  • dtc工具编译(dtrace学习)

    转自:***/dtrace.html 以下是使用 DTrace 的开源工具和示例,DTrace 是动态跟踪的实现,可在不同的操作系统(Solaris、Mac OS X、FreeBS…

    2023-07-03
  • 怎么唱说唱有感觉

    1多听说唱乐 想要学习说唱,首先要让自己沉浸在嘻哈乐和说唱乐的氛围中。说唱乐是一种深深根植于城市生活及文化中的音乐风格。找一个你喜欢的说唱歌手,关注他/她的成长史,以了解一些说唱的…

    2023-01-01
  • 如何用word改变证件照的背景颜色

    不会PS没关系,用Word更换证件照背景色只要10秒! 在微博上看到这样一条热搜#原来蓝底照是这样拍的#,看完之后真的成功把我逗笑了,哈~ 垃圾桶怎么也不会想到,有生之年,还能充当…

    2023-01-29
  • 手机如何连接投影仪,手机如何连接投影仪播放

    三分钟告诉你安卓手机怎样连接投影仪 手机连接投影机,有无线和有线两种方法 现在的手机基本是智能手机的,智能手机的大行其道和其强大的功能应用是密不可分的。智能手机最大的特点就是在软件…

    数码科技 2022-12-27
  • 号直播方式有哪些

    视频号独有的优势让它和其他平台的直播架构略有不同,即你除了要开通视频号之外,还需要开通公众号、企业微信,这三个工具将是你未来在微信做生意的必备工具,这三个工具现在是互通互联而且可以…

    2023-06-08
  • 微信怎么@所有人谁都可以吗?,微信所有人的设置方法

    在微信首页打开群聊,输入栏中输入@。选择所有人发送即可。 01 怎么@所有人 微信@所有人具体操作步骤如下: 1、在微信首页页面,点击要@所有人的群聊。 如果在首页没有找到要@的群…

    2023-07-26