百度地图引入之 iframe引入

问题：您所使用的地图JS API版本过低，已不再维护，为保证地图基本功能正常使用，请尽快升级最新版本js API ？？？

http://api.map.baidu.com/lbsapi/creatmap/

解决方法：

1. 申请百度密钥key（申请方法）

百度地图申请一下密钥key https://lbsyun.baidu.com/apiconsole/key#/home
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLveTQFQ-1659085538561)(https://upload-images.jianshu.io/upload_images/13298635-e0de7692ea4a3934.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
添加一个浏览器端的应用就可以啦。
如果不想对任何域名做限制，设置为英文半角星号*。配置流程看提示就可以啦

2. 关于代码案例- baidu-map/index.html 页面

copy完 http://api.map.baidu.com/lbsapi/creatmap/ 链接的代码之后，需要改一下content=“text/html; charset=utf-8”

地图宽度高度需要加一下

<!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???

   <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>

百度地图引入之 iframe引入相关推荐

html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
关于百度地图中mapview无法引入的问题
问题描述: 最近看了郭神的第一行代码,按照百度地图API配置好了,相应的jar包和so文件都引入了,也在AndroidMainfest.xml中配置了AK,但是无法使用com .baidu .mapa ...
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。标签： ECharts3Echarts2模拟迁徙百度地图引入
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 很多小伙伴都来要demo源码,现在我把demo放在我的GitHub上了. https://github.com/ ...
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅
利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图. 标签: ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅 ...
web端加载百度地图和天地图
1.加载百度地图在页面中引入js文件 <html> <head> <script type="text/javascript" src=" ...
关于ArcGis for javascript整合百度地图天地图高德地图进行搜索
1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api 1  2 <script type=" ...
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索）
百度地图开发系列目录数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API.Echarts.百度地图) 数据可视化大屏百度地图API开发:停车场分布标注和检索静态版百度地图高级开发:m ...
1.百度地图api3.0-设置点的弹跳点
引入百度地图的js 这里引入时和引入百度地图api1.0不同参数v=3.0 <script type="text/javascript" src="http:// ...
Echarts结合百度地图API绘制热力图
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图,在将其与百度地图结合的过程中遇到了一些问题,现将其过程与解决方案记录下,以供日后参考.echarts中结合百度地图API的热力 ...

百度地图引入之 iframe引入

解决方法：

1. 申请百度密钥key（申请方法）

2. 关于代码案例- baidu-map/index.html 页面

3. html-frame 引入baidu-map/index.html 页面

百度地图引入之 iframe引入相关推荐

最新文章

热门文章