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. Linux内核学习-进程

    先说几个术语: 一.Linux进程的五个段 下面我们来简单归纳一下进程对应的内存空间中所包含的5种不同的数据区都是干什么的.重点:代码段.数据段.堆栈段,这是一个概念堆.栈.全局区.常量区,这是另一个 ...

  2. echarts（4.0版本）

    1.echarts 开发文档 :https://echarts.baidu.com/echarts2/doc/doc.html  或  https://echarts.baidu.com/option ...

  3. mysql数据权限操作

    1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost identified by &quo ...

  4. ibatis 中的 $和#的区别

    在sql配置中比如in(#rewr#) 与in ($rewr$) 在Ibatis中我们使用SqlMap进行Sql查询时需要引用参数,在参数引用中遇到的符号#和$之间的区分为,#可以进行与编译,进行类型 ...

  5. webpack构建缓存机制-hash介绍

    前言 浏览器为了优化体验,会有缓存机制.如果浏览器判断当前资源没有更新,就不会去服务端下载,而是直接使用本地资源.在webpack的构建中,我们通常使用给文件添加后缀值来改名以及提取公共代码到不会改变 ...

  6. CTF隐写——越光宝盒

    0x题目 原题来自于实验吧:http://www.shiyanbar.com/ctf/1992 一句话,和一个PNG图片. 0x解题 1.下载图片以后,发现打不开. 首先想到的就是文件头可能被修改了, ...

  7. 字母加密-C基础

    输入一个英文小写字符和正整数k(k<26),将英文字母加密并输出.加密思想:将每个字母c加一个序数k, 即用它后面的第k个字母代替,变换公式:c = c + k.如果字母为z,则后一个字母是a, ...

  8. Python最快的方式来读取大文本文件（几GB）

    我有一个大文本文件(约7 GB).我正在寻找是否存在阅读大文本文件的最快方法.我一直在阅读有关使用多种方法作为读取chunk-by-chunk以加快进程的过程. 例如,effbot建议 # File: ...

  9. 线性方程组迭代算法——Gauss-Seidel迭代算法的python实现

    原理: 请看本人博客:线性方程组的迭代求解算法——原理 代码: import numpy as np max=100#迭代次数上限 Delta=0.01 m=2#阶数:矩阵为2阶 n=3#维数:3X3 ...

  10. 线性方程组迭代算法——Jacobi迭代算法的python实现

    原理: 请看本人博客:线性方程组的迭代求解算法——原理 代码: import numpy as np max=100#迭代次数上限 Delta=0.01 m=2#阶数:矩阵为2阶 n=3#维数:3X3 ...