<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />

<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />

<title>百度地图API自定义地图</title>

<!--引用百度地图API-->

<style type="text/css">

    html,body{margin:0;padding:0;}

    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}

    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

</style>

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

</head>

<body>

  <!--百度地图容器-->

  <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

</body>

<script type="text/javascript">

    //创建和初始化地图函数：

    function initMap(){

        createMap();//创建地图

        setMapEvent();//设置地图事件

        addMapControl();//向地图添加控件

    }

    //创建地图函数：

    function createMap(){

        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

        var point = new BMap.Point(116.395645,39.929986);//定义一个中心点坐标

        map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中

        window.map = map;//将map变量存储在全局

    }

    //地图事件设置函数：

    function setMapEvent(){

        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)

        map.enableScrollWheelZoom();//启用地图滚轮放大缩小

        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)

        map.enableKeyboard();//启用键盘上下左右键移动地图

    }

    //地图控件添加函数：

    function addMapControl(){

        //向地图中添加缩放控件

    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

    map.addControl(ctrl_nav);

        //向地图中添加缩略图控件

    var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});

    map.addControl(ctrl_ove);

        //向地图中添加比例尺控件

    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

    map.addControl(ctrl_sca);

    }

    initMap();//创建和初始化地图

</script>

</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. 基于吉日嘎拉的通用权限管理WebForm版扩展：字典选项管理和缓存管理

    关于字典管理,其实就是2个表,一个表记录字典和对应表,另一个表记录字典内容.我这里改名为字典选项,其实是一个意思.直接上图: 这里的字典选项是分子系统的,每个子系统可以有自己的单独字典,方便管理.但是 ...

  2. GJM ：Sql 各种语句 以及函数 [转载]

    版权声明:本文原创发表于 [请点击连接前往] ,未经作者同意必须保留此段声明!如有侵权请联系我删帖处理! 1.更改数据库的名称 2.表中有数据的情况下再添加列.删除列 3.在SQLServer 中各种 ...

  3. 模拟Executor策略的实现

    Executor作为现在线程的一个管理工具,就像管理线程的管理器一样,不用像以前一样,通过start来开启线程 Executor将提交线程与执行线程分离开来,使得用户只需要提交线程,并不需要在乎怎么和 ...

  4. 玩转Docker之常用命令篇（三）

    首先我们来解决一个小问题,使用docker每次都要用sudo,为了让非root用户使用docker,可将当前用户添加到docker用户组: sudo groupadd docker sudo gpas ...

  5. sDashboard：简单的，轻量级的 jQuery 仪表板插件

    sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 ​动重新排列. sDashboards 内置渲染 Da ...

  6. css选择器中:first-child与:first-of-type的区别

    :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

  7. 定制Eclipse IDE之杂症篇

    上文回顾:定制Eclipse IDE之插件篇(二) 该篇将讲述在开发Eclipse 插件过程发生的疑难杂症.不谈功能,只说病症. 前言.拿哪个Eclipse作为定制的基础? 我建议是你用哪个Eclip ...

  8. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  9. 国内第一篇详细讲解hadoop2的automatic HA+Federation+Yarn配置的教程

    前言 hadoop是分布式系统,运行在linux之上,配置起来相对复杂.对于hadoop1,很多同学就因为不能搭建正确的运行环境,导致学习兴趣锐减.不过,我有免费的学习视频下载,请点击这里. hado ...

  10. [Android]实现类似微信的延迟加载的Fragment——LazyFragment

    以下内容为原创,转载请注明: 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4303910.html  参考微信,使用ViewPager来显示不同的t ...