联系我们中如何引入高德地图并且标注公司位置?

栏目:建站教程 2024-05-22

第一步:获取高德地图的key,用电脑打开高德开放平台的官网首页(https://lbs.amap.com/)去注册一个账号(已注册的直接登录),如果不会申请Key,进入https://lbs.amap.com/api/harmonyosnext-sdk/guide/get-key这个网址根据官方提供的开发指南可以获取

第二步:获取坐标,用电脑打开坐标拾取器网址https://lbs.amap.com/tools/picker可以获取

第三步:获取源代码,用电脑打开设置点标注的文本标签的网址https://lbs.amap.com/demo/javascript-api-v2/example/marker/set-marker-text-label可以获取

第四步:进入后台,点击后台左侧管理信息下面的联系我们,注意这里分为两种情况

第1种情况:如果进入的是代码管理 > /html/ > 修改代码,下面以演示站点二为例来说明如何修改

1.1:登录http://www.sznest.net/admin/index.php?to=/_mfmb/0002/这个网站的后台,点击后台左侧管理信息下面的联系我们

1.2:在<div class="MapInfo">这一行代码的下一行添加右边的代码<div id="container"></div>,见下图,如果用的是火狐浏览器按Ctrl+F快捷键进行搜索查找可以快速代码定位
未标题-2

1.3:依次点击代码、/_mfmb/0002/_backup/html/css/、style.css,见下图
未标题-1
1.4:在style.css的源代码中#Map .MapInfo{ float:left; border: 1px dashed #ccc; padding:8px;}这一行代码的下一行加入右边的代码#Map .MapInfo #container{ width:870px; height:380px; },见下图
未标题-5

1.5:再次点击后台左侧管理信息下面的联系我们,在源代码的<!--主体内容 结束-->这一行代码的下一行添加第三步获取到的源代码中的部分代码,见下图,注意这里的部分代码仅指JS代码,也就是仅仅源代码中的<div id="container"></div>到</body>之间的代码
未标题-7

1.5:修改JS代码

1.5.1:将“您申请的key值”改成之前自己的申请的那个key

1.5.2:将“116.397428, 39.90923”这个坐机改成前面第二步获取到的坐标

1.5.3:将“我是marker的title”改成你的公司名称

1.5.4:将“我是 marker 的 label 标签”改成您公司的电话,地址等信息,如果电话、地址等信息需要换行,中间使用<br/>来隔开,示例“010-88888888<br/>北京市

第2种情况:如果进入的是联系我们 > 添加 (或者联系我们 > 修改),下面以演示站点三为例来说明如何修改
2.1:登录http://www.sznest.net/admin/index.php?to=/_mfmb/0003/这个网站的后台,点击后台左侧管理信息下面的联系我们
2.2:在<div class="MapInfo">这一行代码的下面添加三行代码,见下图,要注意文件路径,如果是你的网站后面代码或图片中的"/_mfmb/0003/"都是需要换成"/"的
未标题-8

2.3:进入后台,点击“代码”,点击"/_mfmb/0003/html/",点击“添加代码”,名称填写“map.php”,将前面第三步获取到的源代码全部复制到后台的源代码多行文本输入框中,(因为演示站点三已经添加过,所以这一步是在/_mfmb/0003/html/目录下找到map.php这个文件直接进行修改)

2.4:修改源代码 按上面1.5的那一步来修改JS代码,注意任何操作都需要点击提交才能完成

2.5:继续点击后台左侧管理信息下面的联系我们,点击编辑器的第一个图标切换到源代码模式,然后将引入高德地图的代码复制进去即可,见下图

下面是引入高德地图的代码

<iframe src="/html/map.php" width="100%" height="400" frameborder="0"></iframe>

说明:上面的400是高度,可以自己根据情况修改

演示效果:登录http://www.sznest.net/admin/index.php?to=/_mfmb/0003/这个网站的后台,点击联系我们

相关阅读

FlashFXP工具使用图解

2024-05-52

FlashFXP工具使用图解FlashFXP工具使用图解FlashFXP工具使用图解下载地址:FlashFXP.zip

如何配置邮件服务器?

2023-02-2134

配置好邮件服务器之后,可以接邮件服务器发送的消息,比如后台更改密码之后可以自动将后台账号的密码发送到后台管理员的密保邮箱,前台用户留言之后自动将留言信息发送到后台管理员的密保邮箱,那么如何配置邮件服务器呢?在配置邮件服务器之前需要先获取网易客户端授权密码,下面是获取网易客户端授权密码的7个步骤1:用电脑打开网易的官网https://www.163.com/2…

怎么样采集别人网站的数据?

2023-02-2136

我们公司的网站采集功能,即可以采集文字,也可以采集图片,还可以采集产品详情页的属性名、属性值,即能采集标题图片在列表页的情况,还可以采集标题图片在详情页的情况,即可以单页采集,也可以多页采集,即可以多条件采集,也可以多条件过滤,但是要成功的采集别人网站的数据,需要在自己的网站后台先添加采集规则,下面是添加采集规则的详细说明,请仔细阅读。脚本暂停时间(秒):必…

为什么修改之后仍然没有变化?

2023-02-252

因为还没有生成静态页面,生成静态页面之后然后在前台的当前页面中按F5刷新即可看到变化。

如何修改节点的名称,比如将公司简介修改为公司介绍?

2023-02-241

在上边点击节点管理,在节点列表中找到公司简介,点击公司简介,进入修改子节点的页面,将公司简介修改为公司介绍即可

如何修改首页标题、关键词、描述等?

2023-02-236

在左边找到首页下面的标题、关键词、描述,然后点击进入即可修改(提醒:标题、关键词、描述的修改有很多注意事项及方法,具体点击这里进入查看,网页标题(title)设置的有哪些注意事项)