参考网址: 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 [一]的更多相关文章

  1. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  2. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  3. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  4. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  5. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  6. 百度地图JavaScript API本地搜索的结果面板

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. 百度地图 JavaScript API

    最近有点懒  项目结尾了  完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...

  8. 百度地图 Javascript API 笔记

    因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...

  9. 百度地图JavaScript API获取用户当前经纬度和详细地理位置,反之通过详细地理位置获取当前经纬度

    前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...

  10. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

随机推荐

  1. LAMP环境配置 linux+apache+mysql+php

    虚拟机安装Linux系统: 新建虚拟机过程中选择Linux,下面选择centos或者是Ubuntu Linux切换图像命令:注意只有装了图像界面才可以切换 查看安装环境的版本: rpm -qa 查看安 ...

  2. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  3. Android,ios,WP三大手机系统对比

    从前,我以为.一个手机系统只是一个系统的UI风格,没什么不同的.然而,在我混合使用这三个手机系统之后,才明白,一个手机系统远不只一个UI那么简单,而真的是可以称之为一个“生态”. 首先祭出三台经典设备 ...

  4. jquery点滴

    1.toggle 2.next prev after before 3.on 4.当我们使用jquery的attr('checked',true)或者attr('checked','checked') ...

  5. 【教程】CDQ套CDQ——四维偏序问题

    前言 上一篇文章已经介绍了简单的CDQ分治,包括经典的二维偏序和三维偏序问题,还有带修改和查询的二维/三维偏序问题.本文讲介绍多重CDQ分治的嵌套,即多维偏序问题. 四维偏序问题       给定N( ...

  6. HDF5基本使用方法

    HDF5, 大量(海量?)数据存储的一种解决方案. HDF的全称是Hiearchical Data Format, 5是版本号(未考证过TODO). 一个HDF5文件操作起来就像一个独立的文件系统. ...

  7. listbox 多选删除(找了好多都不行,终于让我写出来了)

    方法一:两个for循环 aspx.cs private string id=""; protected void btn_del_Click(object sender, Even ...

  8. cocoapods安装

    什么是cocoapods CocoaPods是一个用来帮助我们管理第三方依赖库的工具.它可以解决库与库之间的依赖关系,下载库的源代码,同时通过创建一个Xcode的workspace来将这些第三方库和我 ...

  9. iTestSharp的简单应用

    前言 最近公司某项目要针对一些信息基础表绘画成表格的形式然后生成pdf文件,在网上寻找到iTestSharp发现此类库很强大,虽然园子里已经有很多大牛写了关于此插件的使用方法,但是自己也想写一写,把自 ...

  10. Android基础测试题(二)

    今天给大家带来的是Android基础测试题(二) 题目要求: 定义一个5位长度的整型数组并初始化,然后构建方法根据用户传入的数字判断是否存在数组中,如果存在,返回所在位置,如果不存在,返回-1 首先第 ...