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

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

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

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

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

第二步：点击红圈上的点，获取新地址；

第三步：在点击后，地址栏目里面的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截止此时就弄好了，效果如下：