免密钥在 WordPress 页面中插入高德地图

我们在企业建站中经常需要加入地图等区位介绍,以直观地标识某个位置的所在地。当然可以用一张地图的截图,但引用地图则可让用户不必离开页面,就能详细地查看更多地图信息。对比了百度地图、高德地图、腾讯地图,引用的时候基本都需要注册账号,然后申请 key ,引用都很麻烦,这里简绍一个不需要密钥的 api —— 高德地图。
免密钥在 WordPress 页面中插入高德地图-云模板

获取高德地图引用代码

打开高德地图生成器:高德地图,按步骤创建地图,功能很丰富。
免密钥在 WordPress 页面中插入高德地图-云模板可以编辑地图样式,按照自己的喜好修改地图的外观,地图的宽和高、地图上显示的按钮(缩放、缩略图、比例尺)、鼠标和键盘对地图的操作等,一般默认即可。
免密钥在 WordPress 页面中插入高德地图-云模板添加标签,可以添加自己想要标注的位置和信息。

第一个是点标记,用于标记我们相对更准确的位置,可以加入名称和备注,用于展示个性化信息。第二个是线标记,可用于标记行走路线的指引。第三个是区块标记,可用于在地图标记区块大小等。
免密钥在 WordPress 页面中插入高德地图-云模板设置好后点击“获取代码”按钮,生成地图引用代码,内容如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="keywords" content="高德地图,DIY地图,高德地图生成器">
  6.     <meta name="description" content="高德地图,DIY地图,自己制作地图,生成自己的高德地图">
  7.     <title>高德地图 - DIY我的地图</title>
  8.     <style>
  9.         body { margin: 0; font: 13px/1.5 "Microsoft YaHei", "Helvetica Neue", "Sans-Serif"; min-height: 960px; min-width: 600px; }
  10.         .my-map { margin: 0 auto; width: 600px; height: 600px; }
  11.         .my-map .icon { background: url(http://lbs.amap.com/console/public/show/marker.png) no-repeat; }
  12.         .my-map .icon-cir { height: 31px; width: 28px; }
  13.         .my-map .icon-cir-red { background-position: -11px -5px; }
  14.         .amap-container{height: 100%;}
  15.     </style>
  16. </head>
  17. <body>
  18.     <div id="wrap" class="my-map">
  19.         <div id="mapContainer"></div>
  20.     </div>
  21.     <script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
  22.     <script>
  23.     !function(){
  24.         var infoWindow, map, level = 17,
  25.             center = {lng: 112.889943, lat: 28.209936},
  26.             features = [{type: "Marker", name: "一为忆", desc: "", color: "red", icon: "cir", offset: {x: -9, y: -31}, lnglat: {lng: 112.890243, lat: 28.20969}}];
  27. 
    
  28.         function loadFeatures(){
  29.             for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
  30.                 data = features[i];
  31.                 switch(data.type){
  32.                     case "Marker":
  33.                         feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
  34.                             zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
  35.                             content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
  36.                         break;
  37.                     case "Polyline":
  38.                         for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
  39.                             path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
  40.                         }
  41.                         feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
  42.                             strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
  43.                         break;
  44.                     case "Polygon":
  45.                         for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
  46.                             path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
  47.                         }
  48.                         feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
  49.                             strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
  50.                             fillColor: data.fillColor, fillOpacity: data.fillOpacity });
  51.                         break;
  52.                     default: feature = null;
  53.                 }
  54.                 if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
  55.             }
  56.         }
  57. 
    
  58.         function mapFeatureClick(e){
  59.             if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true}); }
  60.             var extData = e.target.getExtData();
  61.             infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
  62.             infoWindow.open(map, e.lnglat);
  63.         }
  64. 
    
  65.         map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level});
  66. 
    
  67.         loadFeatures();
  68. 
    
  69.         map.on('complete', function(){
  70.             map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function(){
  71.                 map.addControl(new AMap.ToolBar);
  72.             map.addControl(new AMap.OverView({isOpen: true}));
  73.             map.addControl(new AMap.Scale);
  74.             });
  75.         })
  76. 
    
  77.     }();
  78.     </script>
  79. </body>
  80. </html>

生成引用地图 HTML 文件

把上一步生成的代码保存为一个 HTML 文件,如 amap.html,我们把它上传到网站的根目录下,在浏览器中打开,就可以看到自己定义的高德地图了。

将地图插入 wordpress 页面中

打开你想要插入地图的页面,输入以下代码,如果你使用的古腾堡编辑器,更改区块格式为“自定义 HTML”,然后输入以下代码:

  1. <iframe src="amap.html" width="600" height="600" frameborder="0" scrolling="no"></iframe>

这样我们就吧地图嵌入到网页中了,当然地图的宽高、在网页中显示的位置可自己写 CSS 调整,也可简单地像我只调整宽和高。

在 amap.html 文件中将 width:600px 修改为 width:100%,如下:

  1. .my-map { margin: 0 auto; width: 100%; height: 600px; }

在页面的引用中,也作相应调整,如下:

  1. <iframe src="amap.html" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

进阶个性化

设置地图主题,在上面的 amap.html 中的 loadFeatures();下添加代码 map.setMapStyle() ,如下(只需要添加第 3 行):

  1. loadFeatures();
  2. map.setMapStyle('amap://styles/whitesmoke');//添加主题样式
  3. map.on('complete', function(){
  4. //...
  5. })

添加官方的主题样式,可以到官网体验–>电梯
免密钥在 WordPress 页面中插入高德地图-云模板换主题只需要修改上面代码中的’amap://styles/whitesmoke’后面的 whitesmoke 为上图中文名称后面括号内的内容就可以了。

好了,这样就可以无需注册开发者账号和 key 就可以在网址中加入地图模块了。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/84483

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买