zoukankan      html  css  js  c++  java
  • 地图

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
        body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>地图展示</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    </script>
    地图显示
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
        body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <title>异步加载地图</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
        //百度地图API功能
        function loadJScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=init";
            document.body.appendChild(script);
        }
        function init() {
            var map = new BMap.Map("allmap");            // 创建Map实例
            var point = new BMap.Point(116.404, 39.915); // 创建点坐标
            map.centerAndZoom(point,15);                 
            map.enableScrollWheelZoom();                 //启用滚轮放大缩小
        }  
        window.onload = loadJScript;  //异步加载地图
    </script>
    异步加载地图
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
        body, html { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #map1_container,#map2_container {100%;height:50%;float:left;overflow: hidden;margin:0;}
        #allmap1{margin:0 0 3px;height:100%;}
        #allmap2{margin:3px 0 0;height:100%;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>同时加载两个地图</title>
    </head>
    <body>
        <div id="map1_container"><div id="allmap1"></div></div>
        <div id="map2_container"><div id="allmap2"></div></div>
    </body>
    </html>
    <script type="text/javascript">
        //百度地图API功能
        //加载第一张地图
        var map1 = new BMap.Map("allmap1");            // 创建Map实例
        var point1 = new BMap.Point(116.404, 39.915);  
        map1.centerAndZoom(point1,15);               
        map1.enableScrollWheelZoom();                  //启用滚轮放大缩小
        //加载第二张地图
        var map2 = new BMap.Map("allmap2");            // 创建Map实例
        var point2 = new BMap.Point(116.404, 39.915);  
        map2.centerAndZoom(point2,15);                 
        map2.enableScrollWheelZoom();                  //启用滚轮放大缩小
    </script>
    同时加载俩个地图
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>根据城市名设置地图中心点</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");  // 创建Map实例
        map.centerAndZoom("上海",15);      // 初始化地图,用城市名设置地图中心点
    </script>
    根据城市设置地图中心点
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>设置地图最大、最小级别</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
        map.centerAndZoom(new BMap.Point(116.4035,39.915),8); 
        map.enableScrollWheelZoom(true);
    </script>
    设置地图最大,最小级别
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html { 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap{100%;height:500px;}
            p{margin-left:5px; font-size:14px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>移动地图</title>
    </head>
    <body>
        <div id="allmap"></div>
        <p>初始化地图,中心点为(116.4035,39.915),缩放级别为8的北京市地图,2秒后,通过改变中心点坐标,地图平移到广州</p>
    </body>
    </html>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");       
        map.centerAndZoom(new BMap.Point(116.4035,39.915),8); 
        setTimeout(function(){
            map.panTo(new BMap.Point(113.262232,23.154345));   //两秒后移动到广州
        }, 2000);
    </script>
    移动地图
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html { 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap{100%;height:500px;}
            p{margin-left:5px; font-size:14px;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
        <title>缩放地图</title>
    </head>
    <body>
        <div id="allmap"></div>
        <p>初始化展示中心点为(116.4035,39.915),缩放级别为8的北京市地图,2秒后,通过设置缩放级别将地图放大到14级</p>
    </body>
    </html>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");  
        map.centerAndZoom(new BMap.Point(116.4035,39.915),8); 
        setTimeout(function(){
            map.setZoom(14);   
        }, 2000);  //2秒后放大到14级
        map.enableScrollWheelZoom(true);
    </script>
    缩放地图

     http://developer.baidu.com/map/jsdemo.htm#a3_3

  • 相关阅读:
    convert image to base64 and post to RESTful wcf
    在android webview实现截屏的手动tounchmove裁剪图片
    How to use jquery ajax and android request security RESTful WCF
    using swfUpload in asp.net mvc
    using HttpClient and sending json data to RESTful server in adroind
    ODP.NET数据访问
    android image watermark
    解决国内不能访问github的问题
    idapro权威指南第二版阅读笔记第九章 交叉引用和绘图功能
    idapro权威指南第二版阅读笔记第二章 逆向和反汇编工具
  • 原文地址:https://www.cnblogs.com/ingstyle/p/4108653.html
Copyright © 2011-2022 走看看