• 地图


    <!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

  • 相关阅读:
    Laravel 5.1 简单学习
    Laravel5.1 报错:控制器不存在
    集电极开路、漏极开路、上拉电阻、下拉电阻等接口相关基本概念
    UDS(ISO14229-2006) 汉译(No.7 应用层协议)
    Freescale 车身控制模块(BCM) 解决方案
    汽车控制器LIMPHOME电路设计
    区分整流二极管和稳压二极管
    耦合电容和滤波电容的区别
    二极管钳位电路
    开关二极管工作原理
  • 原文地址:https://www.cnblogs.com/ingstyle/p/4108653.html
Copyright © 2020-2023  润新知