由于百度地图的生成器的插件太旧，（当然可以用百度开发者平台的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可能方法不同。
