JS版百度地图API
地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery
一、引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件来自百度的服务器(所以必须得联网,不然就没戏。。),我们以后用到的所有方法都写在这个JS文件当中。
内容来自17jquery
17jquery.com
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> 17jquery.com 17jquery.com
这里的1.4 为JS版百度地图的版本号,目前最新版本为1.4。(理论上这条语句是可以放在html文件中的任何位置,但是一般人们都放在</head>标签之前,不过我曾看到一本书上说放在</body>前,效率是最高的。)
内容来自17jquery
二、在你的html文件中新建一个<div>容器 :添加一个id属性(这里为<divid="container"></div>)。这个容器是用来放置百度地图的,地图的大小可以通过调节div的样式实现。 一起jquery,17jquery
三、新建一个百度地图
内容来自17jquery
<script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例;("container")就是刚才新建的div的id属性值 var point = new BMap.Point(116.404, 39.915); // 创建点坐标;这个点是由经度和纬度构成的,点可以随意选取 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 //map.centerAndZoom("杭州"); //这条语句可以代替上面那一条,系统会自动定位到该城市,城市名可以根据用户需要自己定 //当然,如果这样子写,那就不需新建point点了 </script> 一起jquery,17jquery ~~~~~~~~~~~~~~~~~~~~~~~~这个是分割线~~~~~~~~~~~~~~~~~~~~~~~~~~ 内容来自17jquery
只要这三步,就可以建立一个百度地图web应用。当然,还需要调节样式之类的。 内容来自17jquery
下面是一个完整的HTML文件:(该例子来自百度官网) 一起jquery,17jquery
<!DOCTYPE html><!--HTML5--> <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:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></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, 15); // 初始化地图,设置中心点坐标和地图级别 </script> </body> </html>
下面是我学习中用到的网站:
http://developer.baidu.com/map/jsdevelop-1.htm
http://developer.baidu.com/map/js-download.htm
http://developer.baidu.com/map/static/doc/Reference_of_Baidu_JavaScript_API_v1.4.pdf
转载请注明出处,尊重原创。http://www.cnblogs.com/jianrong-zheng/。谢谢
JS版百度地图API的更多相关文章
- JS调用百度地图API标记地点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js调用百度地图API创建地图,搜索位置
实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
- js调用百度地图api
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JS使用百度地图API
尚未整理: <script type="text/javascript"> var map = new BMap.Map("dituContent" ...
- js调用百度地图API创建地图
技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...
- JS通过百度地图API获取当前定位信息
$(function(){ var latlon=null; //ajax获取用户所在经纬度 $.ajax({ url:"http://api.map.baidu.com/location/ ...
- Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码
(从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...
- 关于百度地图API (持续跟新)
一.初始化地图显示不在正中间,出现偏移 问题描述与解决办法: 代码: body, html, #allmap { width: 100%; height: 100%; overflow: hidden ...
- 【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
随机推荐
- Rhel6-haproxy+keepalived配置文档
系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.119:haproxy,keepalived server19.exa ...
- Rhel6-lvs配置文档
系统环境: rhel6 x86_64 iptables and selinux disabled 相关网址:http://zh.linuxvirtualserver.org/ yum仓库配置: [rh ...
- 在OpenShift云空间上部署java web应用
在使用之前先来介绍下OpenShift空间 OpenShift是由红帽推出逇一款面向开源开发人员开放的平台即服务(PaaS). OpenShift通过为开发人员提供在语言.框架和云上的更多的选择,使开 ...
- Memcache 详解
这里收集了经常被问到的关于memcached的问题 一般的问题 什么是memcached? 从哪获得memcached? 怎么安装memcached? 哪些平台可以运行memcached? 什么情况下 ...
- SharePoint 2013 Nintex Workflow 工作流帮助(五)
博客地址 http://blog.csdn.net/foxdave 工作流动作 4. Assign To-Do Task(User interaction分组) 直观理解,指派待办任务给一个或多个用户 ...
- 未能加载文件或程序集“DeveloperKit10.1/DotNet/ESRI.ArcGIS.ADF.Local.或它的某一个依赖项
使用VS2010进行ArcGIS Engine 10.1进行开发过程中,出现: 错误 1 未能加载文件或程序集“file:///D:/ArcGIS/DeveloperKit10.0/DotNet/ES ...
- In p = new Fred(), does the Fred memory “leak” if the Fred constructor throws an exception?
No. If an exception occurs during the Fred constructor of p = new Fred(), the C++ language guarantee ...
- Cisco路由器的6种模式
Cisco路由器的6种模式 -------------------------------------------------------------------------------------- ...
- 层次分析模型(AHP)及其MATLAB实现
今天用将近一天的时间学习了层次分析模型(AHP),主要参考了一份pdf,这个网站,和暨南大学章老师的课件,现写出一些自己总结的要点. 一.层次分析法的基本步骤: 角度一: 实际问题——分解——> ...
- magento问题集
magento产品页面价格出现2遍 In app\design\frontend\default\default\template\catalog\product\view\type\Simple.p ...