独立网站嵌入高德/百度/腾讯动态地图 记录-♚付涛纪实阁♚
欢迎访问付涛纪实阁官方网站!

独立网站嵌入高德/百度/腾讯动态地图 记录

昨天在逛一些实体工厂网站的时候,发现同为动态地图,却出现了不一样的呈现方式,而且代码上更为精简;效果如下:

感觉挺方便,也显得蛮大气,比传统用到的那种地图要优质一些,传统效果如下:

传统的地图方式有几个大的弊端:

第一、实现地图嵌入的代码非常多;

第二、实现动态地图的过程有些复杂,还要手工去百度获取目标地点的卫星坐标;

第三、默认不兼容HTTPS,只能手动修改;

第四、显示界面不美观;

然而对于新的这种显示方式就完全排除了上面几种问题;那如何添加呢?

第一步:打开https://www.amap.com/官网,并输入目标的公司名称(如果系统里面默认没有这个公司,则需要先提前导航审核),如下图

注意上图中开方形地址栏里面的URL链接地址是非常长的;

第二步:点击红圈上的点,获取新地址;

第三步:在点击后,地址栏目里面的URL会自动变换成一段短的链接:【https://www.amap.com/place/B0G0ZAWQMP】

然后使用以下代码嵌入到自己网站里面即可;

<span class="html-tag"><iframe <span class="html-attribute-name">src</span>="https://www.amap.com/place/B0G0ZAWQMP" <span class="html-attribute-name">frameborder</span>="<span class="html-attribute-value">0</span>" <span class="html-attribute-name">width</span>="<span class="html-attribute-value">100%</span>" <span class="html-attribute-name">height</span>="<span class="html-attribute-value">500</span>"></span><span class="html-tag"></iframe></span>

d截止此时就弄好了,效果如下:

【要是觉得不错,请帮忙点下广告呗,谢谢!】
查阅标签同类文章:
当前链接:https://www.diebaosoft.com/9905.html责任编辑:付涛
18
【友情提示:】
1、文章内容系作者个人观点,不代表除个人作者外的任何第三方针对观点赞同或支持;
2、本文为「♚付涛纪实阁♚」原创文章,遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议全使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;