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. Learn Spring Framework（continue update...）

    Part I. Overview of Spring Framework The Spring Framework is a lightweight(轻量级的) solution and a pote ...

  2. 背水一战 Windows 10 (5) - UI: 标题栏

    [源码下载] 背水一战 Windows 10 (5) - UI: 标题栏 作者:webabcd 介绍背水一战 Windows 10 之 UI 标题栏 示例TitleBarDemo.xaml <P ...

  3. 修正 ListView 搜寻问题

    问题:如果 SearchEdit 里已输入过搜寻字,再新建 ListView 项目后,会无法显示. 适用:Delphi XE5 源码下载:[原创]修正ListView搜寻问题.zip procedur ...

  4. Hack其实是一门好语言

    基于"PHP是世界上最好的语言"这一理论前提,Hack是PHP的静态类型版,所以至少应该也是一门好的语言吧.

  5. Mockups Mockplus 网页原型设计

    http://www.cocoachina.com/cms/wap.php?action=article&id=15319

  6. springmvc(1)DispatcherServlet源码简单解析

    springmvc的简单配置 1.首先需要在web.xml中配置DispatcherServlet,这个类是springmvc的核心类,所以的操作都是由这里开始,并且大部分都是在这里面实现的,比如各种 ...

  7. Gym 101102C---Bored Judge（区间最大值）

    题目链接 http://codeforces.com/gym/101102/problem/C problem description Judge Bahosain was bored at ACM ...

  8. 关于javascript的一些知识以及循环

    javascript的一些知识点:1.常用的五大浏览器:chrome,firefox,Safari,ie,opera 2.浏览器是如何工作的简化版:3.Js由ECMAjavascript;DOM;BO ...

  9. java对cookie的操作

    java对cookie的操作比较简单,主要介绍下建立cookie和读取cookie,以及如何设定cookie的生命周期和cookie的路径问题. 建立一个无生命周期的cookie,即随着浏览器的关闭即 ...

  10. net user命令集合详解

    net use \\ip\ipc$ " " /user:" " 建立IPC空链接 net use \\ip\ipc$ "密码" /user: ...