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

所属栏目:建站教程 更新时间:2024-05-22 点击: 文章来源:http://www.sznest.net/jzjc/3641.html

第一步:获取高德地图的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/这个网站的后台,点击联系我们

相关阅读

Dreamweaver8下载及安装教程

下载Dreamweaver8这个软件安装软件注意事项:1:提示”选择要创建快捷方式“不用管它,”2:设置为以下文件类型的默认编辑器“也不用管它3:提示安装完成时勾上“启动Dreamweaver8”再点完成4:提示工作区设置不用管它,保持默认的”设计器“这个选项点确定,之后选择默认的”我有一个序列号,希望激活...“这个选项(序列号在压缩包里的”安装说明.tx…

了解详情 >>

如何配置自动发布?

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

了解详情 >>

忘记了后台的登陆密码怎么办?

先通过后台验证的邮箱中去查找,在后台第一次创建管理员时会将模板网站的登陆信息发送到指定的邮箱里,如果此邮件被你删除了,通知我们帮你重置密码,对于免费建站的用户需要收取服务费,一次50元

了解详情 >>

如何控制前台栏目的显示与隐藏,比如需要将客户案例下面的节点案…

在上边点击节点管理,在节点列表中找到客户案例,然后只要点击案例分类一右边的是或否文字进行切换即可,如果显示的是&quot;是&quot;字表示是显示在前台页面,如果是&quot;否&quot;字表示不会显示在前台页面,(注意如果控制手机站的显示与隐藏,需要点击第二个&quot;是&quot;或&quot;否&quot;来进行切换

了解详情 >>

如何对节点或内容进行排序,比如将行业资迅移到公司动态前面?

在上边点击节点管理,在节点列表中找到行业资迅,然后在右边点击上移的黑三角形按钮即可将之移到公司动态的前面,或者点击公司动态右侧的下移的黑三角形按钮也可以实现同样的效果,列表页里面文章顺序排序方法也是一样的?

了解详情 >>

如何配置公众号?

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

了解详情 >>

Copyright @ 2008-2019   www.sznest.net   All rights reserved  网巢网是一家专业为企业提供免费建站、自助建站的模板建站公司     友情链接:香港张元洪律师行   

微信

移动端

客服

顶部