网页中嵌入百度地图

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. Linux svn服务的搭建

    一.yum安装svn yum -y install subversion   二.查看已安装的svn版本信息 svnserve --version   三.创建一个代码库 1.先创建一个目录 mkdi ...

  2. hdu4417 Super Mario

    Problem Description Mario is world-famous plumber. His “burly” figure and amazing jumping ability re ...

  3. 【国家集训队2012】tree(伍一鸣)

    Description 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一:  + u v c:将u到v的路径上的点的权值都加上自然数c:  - u1 v1 u2 ...

  4. edge animate从入门到放弃

    一.什么是edge animate edge animate这是一款方便网页设计师和前端工程师实现动画交互的一款工具,虽然是adobe出品的,但是属于Flash和H5时代的过渡产物,这一款产品在201 ...

  5. 权限管理系统 mysql 数据脚本

    # SQL-Front 5.1 (Build 4.16) /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE */; /*!40101 SET SQL_MODE='STRICT ...

  6. 微信公众号开发笔记2(nodejs)

    本篇主要记录调用微信各种api和功能实现 一.始于access_token 无论调用微信的什么api,都需要一个查询参数,就是我们每隔1小时或者2小时获取的access_token,笔记1中已经保证了 ...

  7. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  8. Python进阶之装饰器

    函数也是对象 要理解Python装饰器,首先要明白在Python中,函数也是一种对象,因此可以把定义函数时的函数名看作是函数对象的一个引用.既然是引用,因此可以将函数赋值给一个变量,也可以把函数作为一 ...

  9. 搭建后台页面布局利用属性target 属性

    HTML 5 <form> target 属性 HTML 5 <form> 标签 实例 提交一个在新窗口中打开的表单: <form action="demo_f ...

  10. Unicode字符集和编码方式

    通常将一个标准中能够表示的所有字符的集合称为字符集,比如ISO/Unicode所定义的字符集为Unicode.在Unicode中,每个字符占据一个码位/Unicode 编号(用4位十六进制数表示,Co ...