1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
  6. <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
  7. <title>百度地图API自定义地图</title>
  8. <!--引用百度地图API-->
  9. <style type="text/css">
  10.     html,body{margin:0;padding:0;}
  11.     .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
  12.     .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
  13. </style>
  14. <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
  15. </head>
  16.  
  17. <body>
  18.   <!--百度地图容器-->
  19.   <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
  20. </body>
  21. <script type="text/javascript">
  22.     //创建和初始化地图函数：
  23.     function initMap(){
  24.         createMap();//创建地图
  25.         setMapEvent();//设置地图事件
  26.         addMapControl();//向地图添加控件
  27.     }
  28.  
  29.     //创建地图函数：
  30.     function createMap(){
  31.         var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
  32.         var point = new BMap.Point(116.395645,39.929986);//定义一个中心点坐标
  33.         map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
  34.         window.map = map;//将map变量存储在全局
  35.     }
  36.  
  37.     //地图事件设置函数：
  38.     function setMapEvent(){
  39.         map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
  40.         map.enableScrollWheelZoom();//启用地图滚轮放大缩小
  41.         map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
  42.         map.enableKeyboard();//启用键盘上下左右键移动地图
  43.     }
  44.  
  45.     //地图控件添加函数：
  46.     function addMapControl(){
  47.         //向地图中添加缩放控件
  48.     var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
  49.     map.addControl(ctrl_nav);
  50.         //向地图中添加缩略图控件
  51.     var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
  52.     map.addControl(ctrl_ove);
  53.         //向地图中添加比例尺控件
  54.     var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
  55.     map.addControl(ctrl_sca);
  56.     }
  57.  
  58.     initMap();//创建和初始化地图
  59. </script>
  60. </html>

http://api.map.baidu.com/lbsapi/creatmap/

js 百度地图的更多相关文章

  1. JS 百度地图 地图线路描绘

    JS 百度地图 地图线路描绘 <script type="text/javascript" src="http://api.map.baidu.com/api?v= ...

  2. JS 百度地图 换地图主题颜色（自定义）

    JS 百度地图 换地图主题颜色(自定义) 可通过这个在线编辑得到自己想要的主题:https://developer.baidu.com/map/custom/ <div id="all ...

  3. JS 百度地图 换地图主题颜色（API自带）

    JS 百度地图 换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...

  4. JS 百度地图-右键菜单

    JS 百度地图-右键菜单 /*-----------------标注右键删除-------------------------*/ var markerMenu = new BMap.ContextM ...

  5. JS 百度地图路书---动态路线

    JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...

  6. JS 百度地图导航

    上一篇文章中我们就简单的学习了HTML5 地理定位,那么今天告诉大家我在项目中遇到的一个问题吧,就是怎么实现点击一个按钮就可以调到百度地图,并且获取到你当前的位置,并且导航到指定的地方去. 不想看步骤 ...

  7. js百度地图API创建弧线并修改弧线的弧度

    去百度API官网下载CurveLine.min.js,注意复制下来的Js前面的行号要删除. // 百度地图API功能 var map = new BMap.Map("container&qu ...

  8. js 百度地图和谷歌地图的选择

    最近手上接到一个需求: 国外的域名访问,显示谷歌地图 国内的域名访问,显示百度地图 切换中英文的时候,中文->显示百度地图,英文->能显示谷歌地图就显示谷歌地图,不能显示(报错)就显示百度 ...

  9. js百度地图-简单的1个坐标点

    要学习百度地图,最好的地方就是去看百度地图API: 案例: <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...

随机推荐

  1. 本地电脑安装和配置Redis操作客户端

    下载需要的文件:http://pan.baidu.com/s/1gdfQePl 把这个下载下来解压就可以了,如图所示     第一步(配置本地服务) 点击run这个DOS执行命令 因为是自己的电脑测试 ...

  2. 解决在android开发中ViewPager中Gallery无法滑动问题

    我的是在viewpager中某个fragment中有gallery... 导致无法滑动,网上找到解决方法. 自定义Gallery. 代码: import android.content.Context ...

  3. 简单在android adb root方法

    在有些android手机上使用adb root希望获取root权限时出现如下提示信息:adbd cannot run as root in production builds.此时提升root权限的方 ...

  4. Scalaz（1）－ 基础篇：隐式转换解析策略－Implicit resolution

    在正式进入scalaz讨论前我们需要理顺一些基础的scalaz结构组成概念和技巧.scalaz是由即兴多态(ad-hoc polymorphism)类型(typeclass)组成.scalaz typ ...

  5. ahjesus可供C#使用的ip地理位置查询插件

    http://dev.maxmind.com/geoip/geoip2/downloadable/#MaxMind_APIs 详情请阅读此链接及相关内容

  6. linux常用命令之查阅文件

    CAT cat – concatenate print files 连续的输出文件内容 用法 cat [-nbA] file 选项 -n line number 输出行号 -b line number ...

  7. Medoo个人修改版

    Medoo是一款轻量级的php数据库操作类,下面不会介绍Medoo的使用方法,想学习Medoo请前往官网自学:http://medoo.in/ 在接触Medoo之前,一直是用自己写的php数据库操作类 ...

  8. 【精心推荐】几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  9. Python的下载与安装

    linux系统由于自身的需要,自带了Python,而Windows的系统就没有自带Python.本篇Blog介绍在win8.1下,安装Pathon需要注意的问题,包括常见的0x80240017.250 ...

  10. jquery实现输入框实时输入触发事件代码

    $('.aa').bind('input propertychange', function() { searchProductClassbyName(); }); function searchPr ...