• 项目总结02:百度地图js 基本用法介绍


    <!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{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>
  • 相关阅读:
    开发新技术展望系列课程(视频课程讲师:徐晓卓)
    VSTS风暴系列课程(视频课程讲师:王京京/王兴明/王然)
    Mysql索引的数据结构及索引优化
    CAP原则,分布式场景下为何只能取其二
    为什么使用Redission解决高并发场景分布式锁问题
    Java面试题(6)Redis
    外企英语面试常见问题及核心话术
    Nacos&Eureka&Zookeeper
    j2ee中DAO设计模式
    第一个随笔
  • 原文地址:https://www.cnblogs.com/wobuchifanqie/p/6764229.html
Copyright © 2020-2023  润新知