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. Red Hat Enterprise Linux 7.x新特性

    Red Hat Enterprise Linux 7.x新特性 RHEL7新特性简介 1.      RHEL7目前支持架构 64-bit AMD.64-bit Intel.IBM POWER.IBM ...

  2. PIL库，图像处理第三方库

    PIL  ---> python imaging library 安装需要安装pillow库,包含了21种类,其中Image类是PIL最重要的一个类,可以通过它来处理图像. Python最常用的 ...

  3. cs224d 作业 problem set1 (二) 简单的情感分析

    使用在上一篇博客中训练好的wordvector 在这一节进行情感分析. 因为在上一节中得到的是一个词就是一个向量 所以一句话便是一个矩阵,矩阵的每一列表示一个词向量 情感分析的前提是已知一句话是 (超 ...

  4. Forgery CodeForces - 1059B

    一道印章刻印的题目: 具体要求:有一个固定的3*3的印章,给你一个墨迹问能用这个印章印出墨迹吗?(一个像素可以多次被上色) 输入:第一行是墨迹的行列规模,接下来是墨迹 输出:If Andrey can ...

  5. 去BAT面试完的Mysql面试题总结（55道，带完整答案）

    1.一张表里面有ID自增主键,当insert了17条记录之后,删除了第15,16,17条记录,再把mysql重启,再insert一条记录,这条记录的ID是18还是15 ? 2.mysql的技术特点是什 ...

  6. Spark on YARN--WordCount、TopK

    原文地址:http://blog.csdn.net/cklsoft/article/details/25568621 1.首先利用http://dongxicheng.org/framework-on ...

  7. 怎么在vue-cli中利用 :class去做一个底层背景或者文字的点击切换

    // html <div class="pusherLists" :class="{hidden: isHidden}"> <span @cl ...

  8. 使用mybatis时，sql查出来的结果映射不进逆向工程生成的该模型

    为了逆向工程生成驼峰效果,我们会在两个单词中间加_,但是在mybatis中,写sql语句时,要加别名,使别名和你逆向工程生成的该数据模型里面的属性名一致,否则查出来的结果映射不进去.

  9. web集群和分布式服务以及消息补偿机制几种方案

    一.为什么要集群? 1.JavaEE项目,如果部署在一台Tomcat上,所有的请求,都由这一台服务器处理,存在很大风险: A:并发处理能力有限(一般单台服务器处理的并发量为250左右,超过250,可能 ...

  10. 【记录】API Gateway作用？ 与过滤器的区别？Nginx与Zuul区别？

    网关(gateway)的作用: 网关可以拦截客户端所有请求,对该请求进行权限控制.负载均衡.日志管理.接口调用监控等 过滤器与网关的区别是什么? 过滤器是拦截单个tomcat服务器请求. 网关是拦截整 ...