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. centos6 sersync2使用

    接收端rsyncd搭建 http://www.cnblogs.com/hanxiaohui/p/8675409.html 推送端sersync2使用 安装 源码包D:\share\src\sersyn ...

  2. sql格式化工具推荐

    还在为上百行甚至上千行冗余的sql烦恼吗?这里推荐一款在线美化sql的工具 工具地址:http://www.matools.com/sql 怎么样,黑屏界面是不是带有满满的黑科技感? 该工具支持ora ...

  3. margin 负值问题

    * margin-top 和 margin-left 负值,自身元素向上.向左移动: * margin-right 负值,右侧元素左移,自身元素不受影响: * margin-bottom 负值,下方元 ...

  4. Windows-右键菜单添加选项

    新建 add.reg 输入选项名和选项对应程序路径 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\选项名] [HKEY ...

  5. Spring MVC 常用注解 和session界面渲染取值

    @RequestParams name 修饰当前形参的属性 value 和name属性一样 也是修饰当前属性 defaultValue 给属性设置一个默认值 默认属性 required 必备属性 1. ...

  6. （转）SQL Server 数据类型映射

    SQL Server 数据类型映射 SQL Server 和 .NET Framework 基于不同的类型系统. 例如,.NET Framework Decimal 结构的最大小数位数为 28,而 S ...

  7. 力扣算法题—149Max Points on a line

    Given n points on a 2D plane, find the maximum number of points that lie on the same straight line. ...

  8. CSS Sprites技术原理和使用

      在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites. 淘宝的css sprites ...

  9. Jmeter脚本如何在Linux通过no GUI的方式运行 命令行传递参数

    本文主要介绍Jmeter脚本如何在Linux通过no GUI的方式运行.总共分三部分: 1.Linux下JDK的安装及环境变量的配置 2.Linux下Jmeter的安装及环境变量的配置 3.运行结果的 ...

  10. 神奇，教你用随机数打印hello world

    下面是一段随机数程序. public static void main(String[] args) { System.out.println(randomString(-229985452) + & ...