百度地图JavaScript API [一]
参考网址： http://developer.baidu.com/map/index.php?title=jspopular/guide/widget
1.申请密钥(ak)
http://api.map.baidu.com/api?v=1.4 //参数v表示您加载API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/api?v=2.0&ak=您的密钥 //使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。
2.基础使用
加载的js文件：<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:%}
body{height:%;margin:0px;padding:0px}
#container{height:%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx">
</script>
</head> <body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, ); // 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
开发移动平台上的地图应用：
（1）将地图容器高设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。
（2）添加下面的meta标签： <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。
基础添加：
（1）创建地图实例：var map=BMap.Map("#container");
（2）创建坐标点：var point =BMap.Point(116.404,39,915);
（3）地图初始化：map.centerAndZoom(point,15); //要求设置中心坐标点及地图级别
（4）其他操作：map.enableScrollWheelZoom--鼠标滚轮控制缩放（更多在 Map类参考的配置方法）
百度地图JavaScript API [一]的更多相关文章
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- 百度地图JavaScript API使用
最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...
- 百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
- 【百度地图JavaScript API】手机端浏览器定位的实现
[百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- 百度地图JavaScript API本地搜索的结果面板
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 百度地图 JavaScript API
最近有点懒 项目结尾了 完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...
- 百度地图 Javascript API 笔记
因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...
- 百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度
前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...
- 百度地图 JavaScript API 极速版 开发体会
前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...
随机推荐
- Shell中字符串分割的三种方法
问题:对于’1,2,3,4,5’这样的字符串输出采用,分隔开的1 2 3 4 5 特征:在字符串中没有空格 解决方法1: #!/bin/bash var=’1,2,3,4,5’ var=${var// ...
- Torch7在Ubuntu下的安装与配置
Torch7的本系列教程的主要目的是介绍Torch的入门使用.今天首先分享一下Torch7的安装.(在Ubuntu14.04安装torch7) 为什么选择Torch Torch的目标是在建立科学算法的 ...
- 【转】XenServer的架构之Xenopsd组件架构与运行机制
一.Xenopsd概述 Xenopsd是XenServer的虚拟机管理器. Xenopsd负责:启动,停止,暂停,恢复,迁移虚拟机:热插拔虚拟磁盘(VBD):热插拔虚拟网卡(VIF):热插拔虚拟PCI ...
- L1-006. 连续因子
https://www.patest.cn/contests/gplt/L1-006 题目地址 在上面 一个正整数N的因子中可能存在若干连续的数字.例如630可以分解为3*5*6*7,其中5.6.7就 ...
- noip2016十连测题解
以下代码为了阅读方便,省去以下头文件: #include <iostream> #include <stdio.h> #include <math.h> #incl ...
- 自动判断应该Ajax还是return
起因 最近回顾以前的代码,发现一个偶尔会见到的现象.一个类里面的方法可能需要Ajax返回,也有可能需要函数return.这个现象发生在网站MVC中的 逻辑层(或模型层),示例如下.IndexCtrl是 ...
- 打包SpringBoot工程并部署
使用工具:Eclipse Linux下JDK版本:jdk-7u79-linux-x64.tar.gz 一.打包成jar并部署 步骤如下: 首先上pom.xml: <project xmlns=& ...
- 移动端重要的几个CSS3属性设置
去掉点击链接和文本框对象的半透明覆盖(iOS)或者虚框(Android) -webkit-tap-hightlight-color:rgba(0,0,0,0); 禁用长按页面时弹出菜单(iOS下有效) ...
- Djago模板拾起
在view中使用template: 首先在settings.py中配置模板文件的路径. TEMPLATE_DIRS = ( '/home/django/mysite/templates', ) 1.变 ...
- 通过一个实例重新认识引用类型，值类型，数组，堆栈，ref
昨天在写代码时候遇到了一个问题,百思不得其解,感觉颠覆了自己对C#基础知识的认知,因为具体的情境涉及公司代码不便放出,我在这里举个例子,先上整个测试所有的代码,然后一一讲解我的思考过程: using ...