由于百度地图的生成器的插件太旧,(当然可以用百度开发者平台的JSAPI来引入地图),所以笔者这里选择了把高德地图api插入进网站中。
-第一步:登录高德开发者平台,注册高德地图开发者账号
-第二步:创建应用,并添加Key
- 进入高德地图开发者控制台
- 选择应用管理–>我的应用
3. 点击右上角的 创建新应用
4.在弹出的窗口中,填入你喜欢的应用名字和应用场景
5.点击新创建的应用旁边的 + 号
6.Key的名字任意,选择Web端(JS API),域名白名单可留空,也可写你自己的域名,点击提交即可成功创建Key
-第3步:创建高德地图HTML文件
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <style type="text/css"> body,html,#container{ width: 100%; height: 100%; margin: 0px } </style> <title>API加载</title> </head> <body> <div id="container" tabindex="0"></div> <script type="text/javascript"> window.init = function(){ var map = new AMap.Map('container', { resizeEnable: true, center:[121.479309, 31.25314], zoom:20 }); if (location.href.indexOf('guide=1') !== -1) { map.setStatus({scrollWheel: false}); map.plugin(["AMap.ToolBar"], function() { map.addControl(new AMap.ToolBar({liteStyle:true})) }); } } </script> <script src="https://webapi.amap.com/maps?v=1.4.15&key=请修改成您的准入密钥Key&callback=init"></script> </body> </html>
把请修改成您的准入密钥Key 修改成刚刚创建的Key密钥,并且另存为xxx.html文件
这里说一下高德地图显示位置的更改,需要修改Html文件的center:[121.479309, 31.25314],行,修改方式如下
- 首先进入高德地图官网
- 搜索你需要定位的地方,比如我要定位上海动物园
- 把浏览器中的经纬度参数手动复制出来,并填入center行
- 或者直接百度搜索经纬度查询,输入你要的地址,查询后复制出经纬度,填入center行
- 修改后的Html文件如下
-
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <style type="text/css"> body,html,#container{ width: 100%; height: 100%; margin: 0px } </style> <title>API加载</title> </head> <body> <div id="container" tabindex="0"></div> <script type="text/javascript"> window.init = function(){ var map = new AMap.Map('container', { resizeEnable: true, center:[121.3627133944, 31.1932656667], zoom:20 }); if (location.href.indexOf('guide=1') !== -1) { map.setStatus({scrollWheel: false}); map.plugin(["AMap.ToolBar"], function() { map.addControl(new AMap.ToolBar({liteStyle:true})) }); } } </script> <script src="https://webapi.amap.com/maps?v=1.4.15&key=请修改成您的准入密钥Key&callback=init"></script> </body> </html>
-第四步:将修改好的html文件上传到你的网站后台,并且在需要的地方调用<iframe>标签
<iframe src="https://www.mdrfb.com/.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>
src参数填写上传的html文件的准确目录,设置合适的高度和宽度就能在网站上显示高德地图了。
预览如下:
如需修改地图缩放大小,请修改html文件的Zoom参数
WordPress需要在文本选项卡下才能填入<iframe>标签,得先从可视化界面切换成文本界面,不同版本的Wordpress可能方法不同。