web开发调用百度地图API + AK申请

要使用百度地图的API我们首先需要在我们的html页面引入js----``

如何获取百度地图ak：

  • 1.登陆百度地图开发者平台
  • 2.注册百度开发者账号并登陆
  • 3.点击进入控制台创建应用，需要注意的是：“Referer白名单”这个字段填写你客户端的ip，不然最后的ak依然无法调用，当然也可以是网站，代表这个ak允许那些客户端使用

基本的准备工作到这里就结束了，下面看看调用代码:

```

Hello, World

html{height:100%}
body{height:100%;margin:0px;padding:0px;display: flex;justify-content: center;align-items: center;}
#container{
height:80%;
border: 10px inset darkgoldenrod;
}

<body>

	<div id="container" class="container"></div>

	<script type="text/javascript">

		var map = new BMap.Map("container");

		// 创建地图实例

		var point = new BMap.Point(108.188512, 31.23829);

		// 创建点坐标

		map.centerAndZoom(point, 19);

		// 初始化地图，设置中心点坐标和地图级别

		map.enableScrollWheelZoom(true);

		// 滚动缩放

// var myStyleJson=[

// {

// "featureType": "road",

// "elementType": "geometry.stroke",

// "stylers": {

// "color": "#ff0000"

// }

// }];

// map.setMapStyle({styleJson: myStyleJson });

//风格

map.addEventListener("click", function(e){

var lat = e.point.lat;

var lng = e.point.lng;

console.log('东经'+lng, '北纬'+lat);

});

```

好了具体玩法参照百度地图API就可以了，这里做一个记录：老家的经纬度是（108.188512, 31.23829）

web开发调用百度地图API + AK申请的更多相关文章

  1. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  2. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  3. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  4. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  5. java调用百度地图API依据地理位置中文获取经纬度

    百度地图api提供了非常多地图相关的免费接口,有利于地理位置相关的开发,百度地图api首页:http://developer.baidu.com/map/. 博主使用过依据地理依据地理位置中文获取经纬 ...

  6. 调用百度地图API的总结

    因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...

  7. Python调用百度地图API实现批量经纬度转换为实际省市地点（api调用，json解析，excel读取与写入）

    1.获取秘钥 调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...

  8. Angular 调用百度地图API接口

    Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...

  9. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

随机推荐

  1. django 重写 mysql 连接库实现连接池

    django 重写 mysql 连接库实现连接池 问题 django 项目使用 gunicorn + gevent 部署,并设置 CONN_MAX_AGE 会导致 mysql 数据库连接数飙升,在高并 ...

  2. NIO浅析（一）

    一:NIO与IO的区别 1.NIO面对的是缓冲区,IO面对的是流 2.NIO是非阻塞的,IO是阻塞的 3.NIO中引入了选择器 二:既然NIO面对的是缓冲区,那就先来了解缓冲区 1.NIO中Buffe ...

  3. 人工智能-动物识别专家系统算法Python + Pyqt 实现

    一.基础知识库 有毛发 哺乳动物 - 有奶 哺乳动物 - 有羽毛 鸟 - 会飞 会下蛋 鸟 - 吃肉 食肉动物 - 有犬齿 有爪 眼盯前方 食肉动物 - 哺乳动物 有蹄 有蹄类动物 - 哺乳动物 反刍 ...

  4. leetcode python反转字符串中的单词

    # Leetcode 557 反转字符串中的单词III### 题目描述 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序. **示例1:** 输入: "L ...

  5. VS2008中编译运行MFC应用程序时，出现无法启动程序,因为计算机中丢失mfc90ud.dll的解决方案

     解决方法:"工具"->"选项"->"项目和解决方案"->"VC++目录",在可执行文件栏中加上如 ...

  6. fedora 26

    图标文件路径: /home/xiezhiyan/.local/share/applications

  7. shell编程：变量替换

    定义变量:$ var_1="I love you, Do you love me" 输出变量:$ echo $var_1 打印结果:I love you, Do you love ...

  8. 清除浮动最有效的css写法

    说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...

  9. Docker-搭建Docker Registry

    私有Docker Registry的部署和配置 从Docker Hub上可以获取官方的Registry的镜像,Registry 默认的对外服务端口是 5000,如果我们宿主机上运行的 Registry ...

  10. DOM0级事件绑定之js的onclick事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...