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

栏目:建站教程 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/这个网站的后台,点击联系我们

相关阅读

如何填写或查看图片的宽度比与高度比?

2023-04-477

1:用火狐浏览器打开网页,如果页面较长,需要拉至最底下,以请求所有的图片资源,同时火狐浏览器会记录每张图片的网址及默认尺寸,如果此图片需要被缩放,那么也会记录缩放之后的尺寸。2:点击火狐浏览器工具菜单下的页面信息(如果找不到菜单按Ctrl+I效果是一样的)3:点击媒体,点击网址下面的图片网址,直到找到你要找的图片为止,找到图片之后,在其下面就能看到当前图片的…

如何让网站运行在自己的电脑上?

2023-02-2773

演示效果:打开浏览器中输入下面的本地域名能看到helloworld本地域名:http://sznest.net/index.html准备工作1:准备一台装有win7操作系统的电脑(win10系统操作步骤基本上差不多)2:下载xampp安装包并且解压到桌面(点击下载)3:在C盘下新建一个名为sznest.net的文件夹4:在此文件夹内新建一个名为index.h…

怎么样采集网站详情页数据?

2025-01-1189

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

如何配置自动发布?

2023-02-2132

如果我们采集了别人网站的数据,我们就可以周期性的,有规律的更新网站,而且无须进入后台,一切由我们公司的建站系统自己来完成,只要我们一次性配置好了自动发布的参数就可以了,那么如何配置自动发布的参数呢?一:选择要配置自动发布的节点。二:设置状态为开启(默认是关闭状态)。三:条数上限:即选择每日自动发布的条数,最少一条,最多五条。四:每条概率:选择每日每条自动发布…

如何配置公众号?

2023-02-2103

一:先获取开发者ID(AppID)与开发者密码(AppSecret)1:在PC端登陆公众平台配置网址,公众平台的网址是https://mp.weixin.qq.com/,推荐使用手机扫码登陆,注意要使用公众平台帐号登录,腾讯其它平台的账号这里不能登录(注意如果还没有公众平台的账号请先注册一个公众号,公众号类型选择服务号)2:登陆成功之后点击“基本配置”(在左…

如何下载安装火狐浏览器以及解决无法打开的问题?

2024-01-1111

怎么下载安装火狐浏览器?一:火狐浏览器的官网地址:http://www.firefox.com.cn/二:在官网的首页点击“下载Firefox”这个按钮。三:下载下来之后,点击“Firefox-ESR-full-latest.exe”就可以直接安装。如果安装成功之后打开的时候提示配置文件缺失怎么办?如果在打开过程中出现“配置文件缺失,无法加载您的Firefo…