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

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

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

相关推荐

  • 机械迷城手机版免费不付费版

    各位游友大家好!五一假期即将结束……小编内心好忧伤,感觉这个假期好像一直在高速上度过的!(流泪T T)今天为大家推荐一款当年的老游戏——《机械迷城》手机版。…

    2023-05-24
  • vivox9splus值得购买吗

    在众多期盼之下vivo的新机终于发布,这两款产品不算带给用户太多惊喜,但相比于上一代产品足够实惠。拥有更细节的外观设计,更加出色的拍照,非常亲民的价格。总之vivo发布的新机给人感…

    2023-03-18
  • 日本脸书账号被盗案

    中国网8月4日讯 据日本共同社报道,独立行政法人信息处理推进机构近日发现,日本国内约7600人的社交网站脸书(Facebook)账号被盗取。盗号数量7月至8月激增。其特征是伪装成朋…

    数码科技 2023-03-11
  • 苹果手机被盗关机也能定位!赶紧打开吗

    如果您想在iPhone关机后仍然能够找到它,您可以启用“查找我的iPhone”功能。以下是如何设置它的步骤: 打开iPhone的“设置”应用程序。 点击您的个人资料,然后点击“iC…

    2023-02-26
  • vivo手机充电慢耗电快怎么解决

    如今,手机和我们的生活越来越紧密,越来越成为不可缺少的东西,手机更新换代的速度也越来越快!功能也越来越强大!每次出门手机要满电了才放心,但是,我们也经常会遇到一些小疑问,比如:手机…

    2024-01-04
  • win10桌面时间日期天气显示怎样设置的

    为了更好地便捷我们自己能够快速搜索時间,日历天气的状况,大家会在桌面表明时间日期气温。但是win10系统软件自身没了以前win7系统软件那般表明的实用工具,win10桌面上时间日期…

    2023-05-09
  • 支付宝账户如何注销,支付宝账户如何注销账户

    支付宝是非常好用的第三方支付平台,其里利于提供‘简单,安全,快速’快速的解决方案,一直受到大家喜欢。 但是,有小伙伴有多个账户,或者有什么安全考虑,想要注销掉支付宝,那么就跟着小夕…

    2023-06-18
  • oppoa79怎样导出电话号码

    存储 ROM 64GB RAM 4GB 存储卡 支持MicroSD(TF) 最大存储扩展容量 128GB 基本信息 机身长度 (mm) 157.3 机身宽度 (mm) 76 机身厚…

    2023-02-22
  • iphone越狱后可以再一键越狱吗

    首先你得有一个U盘,如果没有请手动跳转到在线越狱。 U盘越狱 事先准备: 电脑上下载有爱思助手 有一个不小于4GB的U盘 在电脑上插入U盘,如果电脑提示格式化U盘,请取消。然后,打…

    2023-05-03
  • 华为mate10手机投屏到电脑

    今天试下把mate10安卓手机屏幕投屏到wimdows10电脑上,不想成功了,方法也很简单,不用安装任何额外应用,哪就来试试吧 步骤如下: 一、进入电脑设置, 二、进入“设置”后,…

    2023-04-20