因为项目的需求,第一次接触了百度API。

第一步:引用百度地图API的脚本

  如果在局域网环境中,要把地图文件和js文件都要下载下来

  

<script type="text/javascript"  src="http://api.map.baidu.com/api?key=*****************&v=1.0&services=false"></script>

  这个要去百度开发者中心申请KEY

第二步:建立一个你随便取名的div来放地图

<div style="width: 520px; height: 340px; border: 1px solid gray" id="container"></div>

第三步:使用百度地图API来构建地图

//初始化地图,把地图放在第二步的div中
var map = new BMap.Map("container");
//依据经纬度,确定一个点
var point = new BMap.Point(116.404, 39.915);
//地图中心就是这个点,并且规定地图的放大级数是15
map.centerAndZoom(point, 15);
//界面2s后中心移动到一个新点
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);
//加载一些界面上的控件:缩放控件、比例尺控件、全局控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
//在一个点上加一个标识
var marker = new BMap.Marker(point);
map.addOverlay(marker);

第四步:连网,用浏览器打开

百度地图API的第一次接触的更多相关文章

  1. 百度地图API的第一次接触——地图事件

    0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  2. 百度地图API的第一次接触——标注和信息窗的使用

    1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMa ...

  3. 百度地图API的第一次接触——热区

    1.代码很简单 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  4. 百度地图API的第一次接触——右键菜单

    1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  5. 百度地图API的第一次接触——自定义控件

    1.定义一个控件类,即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEF ...

  6. 百度地图API位置偏移的校准算法

    转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...

  7. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  8. C#调用百度地图API经验分享(一)

    最近客户提了一个需求,要在网站中添加百度地图的显示,其实原来是有谷歌地图的,但由于谷歌在大陆遭到封杀,只好再给用户增加一个选择了. 下面我将自己最近整理的一些知识分享给大家. 如何使用百度地图API: ...

  9. 百度地图API的使用方法

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

随机推荐

  1. JQ动态获取数据

    转:JQUERY获取浏览器窗口的高度和宽度 June 27, 2012 <script type="text/javascript"> $(document).read ...

  2. ASP.NET MVC 4 技术讲解

    ASP.NET MVC 相关的社群与讨论区 Routing 与 ASP.NET MVC 生命周期 Model相关技术 Controller相关技术 View数据呈现相关技术 Area区域相关技术 AS ...

  3. ubuntu 12.10 笔记

    笔记 more ec_unitouch.log |grep Thread-4 筛选日志 打开命令行终端 ctrl + alt + t     查看版本号 : sudo lsb_release -a t ...

  4. Java 学习 day06

    01-面向对象(Static关键字) package myFirstCode; /* 静态:static. 用法:是一个修饰符,用于修饰成员(成员变量,成员函数) 当成员被静态修饰后,就多了一个调用方 ...

  5. MongoDB在win7上的安装(精简版)

    1.下载mongdb的zip文件,解压后会发现有bin文件夹,在同层目录下建一个data目录, 2.在data目录下建一个log和db文件夹, 3.在log文件下建一个MongoDB.log 文件 4 ...

  6. regularexpression_action

    re.compile('"ssid":"[^"]*"}',re.MULTILINE) regex ,str_= re.compile('"s ...

  7. 性能测试--Jmeter录制、回放

    Jmeter录制.回放 在jmeter2.1版本之前,jmeter应该是不支持录制和回放功能的,那时候如果需要录制jmeter的性能测试脚本的话,就需要使用第三方工具——badboy.现在jmeter ...

  8. UVa 10828 Back to Kernighan-Ritchie 高斯消元+概率DP

    题目来源:UVa 10828 Back to Kernighan-Ritchie 题意:从1開始 每次等概率从一个点到和他相邻的点 有向 走到不能走停止 求停止时每一个点的期望 思路:写出方程消元 方 ...

  9. Android Development Note-01

    Eclipse快捷键: 导包:ctrl+alt+o 格式化代码:ctrl+alt+f   MVC: M——Model V——View C——Control   android程序界面如何设计.调试 U ...

  10. python连接redis并插入url

    #!/usr/bin/env python # -*- coding:utf8 -*- import redis ''' 这种连接是连接一次就断了,耗资源.端口默认6379,就不用写 r = redi ...