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

创客云

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

获取高德地图引用代码

打开高德地图生成器:高德地图,按步骤创建地图,功能很丰富。

可以编辑地图样式,按照自己的喜好修改地图的外观,地图的宽和高、地图上显示的按钮(缩放、缩略图、比例尺)、鼠标和键盘对地图的操作等,一般默认即可。

添加标签,可以添加自己想要标注的位置和信息。

第一个是点标记,用于标记我们相对更准确的位置,可以加入名称和备注,用于展示个性化信息。第二个是线标记,可用于标记行走路线的指引。第三个是区块标记,可用于在地图标记区块大小等。

设置好后点击“获取代码”按钮,生成地图引用代码,内容如下:

  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. })

添加官方的主题样式,可以到官网体验-->电梯

换主题只需要修改上面代码中的'amap://styles/whitesmoke'后面的whitesmoke为上图中文名称后面括号内的内容就可以了。

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

本文来源一为忆,经授权后由CityMall发布,观点不代表创客云的立场,转载请联系原作者。
云模板

发表评论