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. ios和android适配

    一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发 解决方案:css增加cursor:pointer; 三星手机遮罩层下的input.select.a等元素可以被点 ...

  2. windows下tomcat7+nginx1.8负载均衡

    1.负载平衡是一种常用的跨多个应用程序实例 技术优化资源利用率,最大化吞吐量, 减少延迟,并确保容错配置. 2.使用nginx作为非常有效的HTTP负载均衡器 将流量分发给几个应用程序服务器和改善 性 ...

  3. processing模拟三角级数合成方波过程

    代码 1: int radius = 2; 2: int[] accumys; 3: int times = 0; 4: 5: float scale = 1; 6: int origin = 400 ...

  4. T1212：LETTERS

    [题目描述] 给出一个R * S的大写字母矩阵,一开始的位置为左上角,你可以向上下左右四个方向移动,并且不能移向曾经经过的字母.问最多可以经过几个字母.roe× [输入] 第一行,输入字母矩阵行数R和 ...

  5. python作业/练习/实战：生成随机密码

    作业要求1.写一个函数,函数的功能是生成一批密码,存到文件里面 def gen_password(num): #num代表生成多少条密码2.密码复杂度要求 1)长度在,8-16位之间 2)密码必须包括 ...

  6. 接口自动化测试框架-AIM3.0-开源+OOP

    这是3.0了,从1.0到2.0直接跨越到3.0,就是这么随意. 3.0的关键词一是开源,源码地址为https://github.com/dongfanger/AIM,二是OOP. 随着python的发 ...

  7. java 重新学习 （二）

    一.栈内存里的引用变量并未真正存储对象的成员变量,对象的成员变量数据实际存放在堆内存中,而引用变量只是指向该堆内存里的对象. 二.堆内存里的对象可以有多个引用,若果堆内存中没有变量指向该对象,程序无法 ...

  8. C# 网络编程 TcpListener

    1.服务断代码 public partial class Server : Form { private bool lk = true; public Server() { InitializeCom ...

  9. python_面向对象,类名称空间,对象名称空间,组合

    创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类有两种属性:静态属性和动态属性 静态属性就是直接在类中定义的变量(字段) 动态属性就是定义在类中的方法 其中类 ...

  10. 代码迁移到华为云上和Git的坑

    代码迁移到华为云上和Git的坑 先设置小乌龟Git上方式为ssh 参考链接:https://www.liangzl.com/get-article-detail-3586.html 注意:Tortoi ...