<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>完整demo</title>

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

    <meta charset="UTF-8">

    <title>baiduMap Demo</title>

    <style type="text/css">

        body{;margin:20px;}

        #container{width:960px;height:720px;}

    </style>
　　/*引用地图资源*/

    <script type="text/javascript"src="http://api.map.baidu.com/api?v=1.3"></script> 

</head>

<body>

    <input type="text"  placeholder="请在输入城市名称"/>

    <input type="button" id="oButton" value="点击获取经纬度" >

    <div id="container"></div>

    <input type="button" onclick="add_control_one();" value="添加比例尺和缩放平移控件" >

    <input type="button" onclick="delete_control_one();" value="删除比例尺和缩放平移控件" >

    <br/>

    <input type="button" onclick="add_control_two();" value="添加地图类型和缩略图" >

    <input type="button" onclick="delete_control_two();" value="删除地图类型和缩略图" >

    <script type="text/javascript">

        //实例化地图，并初始化地图展示位置，必要设置

        var map = new BMap.Map("container"); // 创建地图实例

        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图，设置中心点坐标和地图级别

        //以下是常用的可选设置

        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用

        /*以下是比例尺和缩放平移控件*/

        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺

        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件

        var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮

        /*缩放控件type有四种类型:

        BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

        //添加控件和比例尺

        function add_control_one(){

            map.addControl(top_left_control);

            map.addControl(top_left_navigation);

            map.addControl(top_right_navigation);

        }

        //移除控件和比例尺

        function delete_control_one(){

            map.removeControl(top_left_control);

            map.removeControl(top_left_navigation);

            map.removeControl(top_right_navigation);

        }

        /*以下是地图类型和缩略图*/

        var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});

        var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});

        var overView = new BMap.OverviewMapControl();

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

        //添加地图类型和缩略图

        function add_control_two(){

            map.addControl(mapType1);          //2D图，卫星图

            map.addControl(mapType2);          //左上角，默认地图控件

            map.setCurrentCity("北京");        //由于有3D图，需要设置城市哦

            map.addControl(overView);          //添加默认缩略地图控件

            map.addControl(overViewOpen);      //右下角，打开

        }

        //移除地图类型和缩略图

        function delete_control_two(){

            map.removeControl(mapType1);   //移除2D图，卫星图

            map.removeControl(mapType2);

            map.removeControl(overView);

            map.removeControl(overViewOpen);

        }

    </script>

</body>

</html>

项目总结02：百度地图js 基本用法介绍的更多相关文章

  1. Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图

      标签: Android百度地图API Key  分类: Android 百度地图开发(2)    最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...

  2. 百度地图--JS版

    百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...

  3. 外部引入的js 判断js脚本加载是否完成，完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  4. Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误

    Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...

  5. MVC项目中使用百度地图

    已经很久没更新博客了,因为最近一直在学习前端的知识,没那么多时间,写博客或者写文章不但没有钱,写得好还好说,如果写得不好,一些吃瓜群众,不仅要喷你,搞不好还要人身攻击就不好了.所以写博客的人,脸皮得厚 ...

  6. 百度地图js小结

    1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...

  7. react项目结合echarts,百度地图实现热力图

    一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...

  8. 百度地图js根据经纬度定位和拖动定位点

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  9. 百度地图api基本用法

    首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥. 申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了. 接下来,就是引入百度地图的api 关键 ...

随机推荐

  1. day03-变量

    Python中的变量类型有: int:带正负号的整数long:在python2中表示长整数,在python3中被放弃complex:复数str:字符串True,False:布尔list:列表dict: ...

  2. C++11并发之std::thread<转>

    最近技术上没什么大的收获,也是悲催的路过~ 搞一点新东西压压惊吧! C++11并发之std::thread 知识链接: C++11 并发之std::mutex C++11 并发之std::atomic ...

  3. VB-创建类模块DLL文件

    最近需要调用MSCOMM32.OCX控件,但是ABAP调用过程中发现无法同时发送多条记录,则需调整实现方式: a.创建DLL文件封装MSCOMM控件相关属性及方法 b.系统注册DLL文件 c.ABAP ...

  4. 尚硅谷springboot学习15-日志框架1-入门

    引子 小张:开发一个大型系统 1.System.out.println(""):将关键数据打印在控制台:去掉?写在一个文件? ​ 2.框架来记录系统的一些运行时信息:日志框架 : ...

  5. Python在cmd上打印彩色文字

    在Windows上编写python程序时,有时候需要对输出的文字颜色进行设置,特别是日志显示,不同级别的日志设置不同的颜色进行展示可以直观查看.本文主要描述通过ctypes.windll.kernel ...

  6. 自定义标签在IE6-8的困境

    或许未来前端组件化之路都是自定义标签,但这东西早在20年前,JSTL已在搞了.现在Web Component还只有webkit支持.但一个组件库,还需要一个特殊的标识它们是一块的.不过这个XML已经帮 ...

  7. Excel导入

    public static Collection importExcelByIs(InputStream inputstream, List<CgFormFieldEntity> list ...

  8. Unity资源打包之Assetbundle

    转  Unity资源打包之Assetbundle 本文原创版权归 csdn janeky 所有,转载请详细注明原创作者及出处,以示尊重! 作者:janeky 原文:http://blog.csdn.n ...

  9. 'basetsd.h': No such file or directory

    By Select the Windows 8.1 SDK During install. Download visualcppbuildtools_full.exe from below websi ...

  10. 响应式的账号登录界面模板完整代码，内置form表单和js控件

    响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...