• 项目总结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>
  • 相关阅读:
    traceroute tracert 路由器地址 清单 192.168.2.1 网关路由器地址
    /usr/local/nginx/sbin/nginx -s reload 失败原因pid 进程记录和当前不符
    Nginx应用-Location路由反向代理及重写策略 请求转发-URL匹配规则 NGINX Reverse Proxy
    (转载)你好,C++(1)C++是什么?C++的“前世今生”
    (原创)cocos2d-x 3.0 示例代码分析5:testBasic
    (原创)cocos2d-x 3.0 示例代码分析4:VisibleRect
    (原创)cocos2d-x 3.0 示例代码分析3:BaseTest
    (摘要)100个伟大的商业理念:理念35:引爆流行
    (摘要)100个伟大的商业理念:理念34:企业社会责任
    (摘要)100个伟大的商业理念:理念32:重新改造
  • 原文地址:https://www.cnblogs.com/wobuchifanqie/p/6764229.html
Copyright © 2020-2023  润新知