<!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. c#重点[封装，继承，多肽]

    面向对象的语言三大特点:封装.继承.多态 Ⅰ.封装:是把类的内部隐藏起来,以防止外部世界看见的一个面向对象的概念,通过关键字去控制变量,方法的访问权限. 1).访问修饰符: Ⅱ.继承: eg:我们建一 ...

  2. SQL Pretty Printer-不错的SQL格式化工具

    前言 好长时间没有写过博客了,人变懒了很多,应该说本来也不怎么勤快.但今天为了这个工具,必须得勤快一下了,天下真的没有免费的午餐. 之前使用过sql server 2000的查询设计器和Toad fo ...

  3. Scalaz（6）－ typeclass：Functor－just map

    Functor是范畴学(Category theory)里的概念.不过无须担心,我们在scala FP编程里并不需要先掌握范畴学知识的.在scalaz里,Functor就是一个普通的typeclass ...

  4. JAVA开发环境和IntelliJ工具安装

    在本地开发机中进行web项目的开发,部署到生产环境进行产品发布时,需要将web应用的文件打包成war包,War包可以放在Tomcat下的webapps或者word目录下,随着tomcat服务器的启动, ...

  5. 【Effective Java】11、同步访问共享的可变数据

    这段时间看的部分感觉没啥需要记录下来的,个人也没什么想法,不过以后还是要多记,多写 package cn.xf.cp.ch02.item66; import java.util.concurrent. ...

  6. TestNG官方文档中文版(1)-介绍

    TestNG的官方文档请见: http://testng.org/doc/documentation-main.html 1. 介绍    TestNG是一个设计用来简化广泛的测试需求的测试框架,从单 ...

  7. pymysql 操作数据库

    一.简介 pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同,但目前pymysql支持python3.x而后者不支持3.x版本 其执行语句与sql源码相似 二.使用 ...

  8. angular学习的一些小笔记(中)之基础ng指令

    一.布尔属性指令: ng-disabled:就是ng-disabled=true-->就指向不可用 <!doctype html> <html ng-app="&qu ...

  9. Weex 环境搭建（win7）

    安装 Node.js node.js需要4.0+ 百度云下载地址http://pan.baidu.com/s/1o84g6c6 官网下载地址https://nodejs.org/en/ 安装教程请看这 ...

  10. var和dynamic的区别及如何正确使用dynamic ?

    C#中的很多关键词用法比较容易混淆,var和dynamic就是其中一组,他们都可以申明动态类型的变量,但是本质上他们还是有不少区别的.var 在编译阶段已经确定类型,在初始化时候,必须提供初始化的值, ...