zoukankan      html  css  js  c++  java
  • 百度地图API示例之移动地图

     

    级别为6

    级别为8

    级别为12

    代码:

    复制代码
    <!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 {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        #allmap {
            width: 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=sSelQoVi2L3KofLo1HOobonW"></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"); // 给allmap设置地图
    map.centerAndZoom(new BMap.Point(116.4035, 39.915),12); // 第二个参数为级别,数字越大,聚焦越清晰
    setTimeout(function() {
        map.panTo(new BMap.Point(113.262232, 23.154345)); //两秒后移动到广州
    }, 2000);
    </script>
    复制代码

    说明:设置地图对象

    创建地图级别与默认聚焦点

    2秒后指向其他地方

  • 相关阅读:
    js获取浏览器和屏幕的各种宽度高度
    闭包
    原型与原型链
    vuex
    微信小程序天使童装答辩
    vue脚手架本地开发跨域请求设置
    mvvm和mvc
    Vue 中 methods,computed, watch 的区别
    keep-alive
    YII2组件之GridView
  • 原文地址:https://www.cnblogs.com/ldms/p/5842169.html
Copyright © 2011-2022 走看看