网页中嵌入百度地图

1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular

2.获取密钥:http://lbsyun.baidu.com/apiconsole/key

3.页面上引入js :<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

4.调用:

  1. <script type="text/javascript">
  2. // 百度地图API功能
  3. var map = new BMap.Map("allmap"); // 创建Map实例
  4. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
  5. map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
  6. map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
  7. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  8. </script>

问题:在本地运行的时候没有任何的问题,地图能正常的显示,但部署到线上,地图不显示,报错:The request has been blocked,the content must served over Https

解决问题:http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

    JavaScript API首家支持Https,已全面开放,无需申请Https服务可直接使用

    改成这个就可以了,https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1;

拓展:怎么拾取当前位置的坐标?

  打开http://api.map.baidu.com/lbsapi/getpoint/index.html

  搜索当前位置的坐标:

  就可以找到当前坐标了。

网页中嵌入百度地图报错:The request has been blocked,the content must served over Https的更多相关文章

  1. pc网页中嵌入百度地图

    pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...

  2. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  3. 如何在网页中调用百度地图api

    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...

  4. 如何在HTMl网页中插入百度地图

    方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...

  5. 网页中嵌入google地图

    一丶前言 大致需求:美国地图中标记分布的仓库图钉(鼠标经过显示地址详情),通过输入寄收件地邮编来在地图上定位位置添加图钉,将寄件地,选择的仓库,收件地图钉折线相连接,表示大致路线. 一丶google开 ...

  6. 百度地图报错:APP Referer校验失败

    今天微信小程序,通过经纬度,调用百度api,将经纬度转换成城市名和街道地址,结果小程序报错. 错误信息如下: 这个是KEY的白名单设置问题.因为白名单设置限制了来源信息.只要在下面红色部分设置IP,或 ...

  7. Chrome下使用百度地图报错Cannot read property 'minZoom' of undefined

    问题:工作中在Google chome下面的js console里面测试百度地图API var map = new BMap.Map("container"); map.cente ...

  8. iOS9导入高德地图报错App Transport Security has blocked...

    App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Te ...

  9. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

随机推荐

  1. mysql查询今天、昨天、7天、近30天、本月、上一月 数据

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...

  2. 分针网—每日分享: 怎么轻松学习JavaScript

    js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.   我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路& ...

  3. Mac电脑使用Android Studio进行真机调试

    第一步: 为mac电脑配置 adb 命令的环境变量,分为2小步 1.找到 Android Studio 为你安装的 SDK : 打开电脑中 Android studio 的工具的软件,在启动 Andr ...

  4. JS-监听文本回车事件写入数据表单

    场景   ERP系统扫描输入货品编号到文本框后,触发写入记录到数据表格,并对数据进行渲染.   解决方案 通过发现回车或者换行符,则写入数据表格   代码 //监听文本框输入事件 $('#gidinp ...

  5. 微信小程序开发流程

    2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线,一夜之间,小程序可谓家喻户晓,但通过接下来的几个月的观察,微信小程序并没有想象中的那么火爆.进入4月以来,微信小程序团队进行 ...

  6. 原型(Prototype)模式

    原型模式属于对象的创建模式.通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象.这就是原型模式的用意.原型模式的结构 原型模式要求对象实现一个可以“克隆 ...

  7. 【JAVAWEB学习笔记】24_filter实现自动登录和解决全局的编码问题

    过滤器Filter 学习目标 案例-自动登录 案例-解决全局的编码 一.过滤器Filter 1.filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标 ...

  8. QBC查询

    1.基本语法 session.beginTransaction(); Criteria criteria = session.createCriteria(Person.class); SimpleE ...

  9. UVa1025 (DAG上的dp)

    这是紫书上的第一个dp哈. 1.状态定义:dp[i][j]---->到时刻i的时候(出发的时候时刻为0,约定时间为时刻time),从j号车站开往N号车站,在车站等待的最少的时间. 2.这个人当前 ...

  10. Linux_shell 学习

    shell中test的运用 test 命令是用于检查某个条件是否成立,他可以进行数值.符号.文件三个方面的测试 1.数值中的运用 -eq 等于 -ne 不等于 -gt 大于 -ge 大于等于 -lt ...