- 问题：您所使用的地图JS API版本过低，已不再维护，为保证地图基本功能正常使用，请尽快升级最新版本js API ？？？
解决方法：
1. 申请百度密钥key（申请方法）
- 百度地图申请一下密钥key https://lbsyun.baidu.com/apiconsole/key#/home
应用管理-我的应用 - 添加一个浏览器端的应用就可以啦。
-
如果不想对任何域名做限制，设置为英文半角星号*。配置流程看提示就可以啦
新增应用页面
2. 关于代码案例- baidu-map/index.html 页面
copy完 http://api.map.baidu.com/lbsapi/creatmap/ 链接的代码之后，需要改一下content="text/html; charset=utf-8"
meta
- 地图宽度高度需要加一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=更换为申请百度key就可以咯"></script>
</head>
<body>
<!--百度地图容器-->
<div style="width:822px;height:370px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("dituContent"); // 创建Map实例
var point = new BMapGL.Point(124.41274, 36.928363); // 定位点
var opts = {
offset: new BMapGL.Size(150, 5),
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
}
// 添加控件
map.addControl(new BMapGL.ZoomControl(opts));
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 17); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "信息窗口标题" // 信息窗口标题
}
var json = {
title: '标题',
content: '内容'
}
// 打开信息窗口
var infoWindow = new BMapGL.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());
</script>
</html>
3. html-frame 引入baidu-map/index.html 页面
关于跨域的问题： sandbox属性改为sandbox="allow-scripts"
because the document's frame is sanboxed and the "allow-scriots" permission is not set???
image.png
<div class="about-welcome-right" id="aboutMap">
<iframe id="con_47_40_mapFrame" sandbox="allow-scripts" scrolling="no" src="/pages/badiu-map/index.html" frameborder="0" height="100%" width="821px" style="border:none;margin:0; "></iframe>
</div>
