网页中嵌入百度地图

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.调用:

<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</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. 【转】为什么delete以后指针还能被赋值

    首先,系统知道哪一部分堆的线性空间被占掉了,new就是起这个作用,仅仅是声明一下(可能多了一个功能),因为堆的空间不一定是直接从系统调用获得的,堆的空间是这样管理的:程序先伸请一个大的堆空间,这个时候 ...

  2. office web apps 部署-搭建office web apps服务器

    二.搭建office web apps服务器 相关文件可以去焰尾迭分享的百度网盘下载,下载地址:http://pan.baidu.com/s/1o6tCo8y#path=%252Foffice%252 ...

  3. 蓝桥杯-扑克牌移动-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  4. 微信公众号开发笔记1(nodejs开发的)

    本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...

  5. 腾讯ISUX网页前端代码分析

    看了一下腾讯ISUX网页,无论是pc端还是移动端,展示都挺好看的,先对其代码进行分析如下: 1,先看前三行代码 <!DOCTYPE html> <!-- 腾讯 ISUX 是腾讯集团核 ...

  6. Linux安装yum以及更新yum版本

    .使用RedHat系统不能正常使用yum安装 由于RedHat没有注册,所有不能使用它自身的资源更新,于是使用yum instatll gcc-c++的时候出现This system is not r ...

  7. [刷题]算法竞赛入门经典(第2版) 5-3/UVa10935 - Throwing cards away I

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa10935 - Throwing cards away I #incl ...

  8. FiddlerScript高级技巧---自定义Fiddler菜单

    Tips 书接上回, Fiddler插件 在团队内部试用后,效果很不错,小伙伴们也提出了很多改进的建议: 最近一段Fiddler使用的仍较为频繁,以前碰到一些特殊测试需求时,总是自己在FiddlerS ...

  9. java反射 顺序输出类中的方法

    java反射可以获取一个类中的所有方法,但是这些方法的输出顺序,并非代码的编写顺序. 我们可以通过自定义一个注解来实现顺序输出类中的方法. 首先,先写一个类,定义增删改查4个方法 public cla ...

  10. javaScript 设计模式系列之一:观察者模式

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...