• 百度地图-放大地图


    1、问题背景

         地图根据不同等级可以放大缩小,并且中心点坐标不变


    2、实现源码

    <!DOCTYPE html>
    <html>
      <head>
        <title>放大地图</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak密钥"></script>
    	<style>
    		body,html,#map{
    			 100%;
    			height: 100%;
    			overflow: hidden;
    			margin: 0;
    			font-size: 12px;
    			font-family: "微软雅黑";
    		}
    	</style>
    
      </head>
      
      <body>
         <div id="map"></div>
      </body>
    </html>
    <script>
      //创建地图实例
      var map = new BMap.Map("map");
      //初始化地图
      map.centerAndZoom(new BMap.Point(114.309531, 30.59619),5);
      //放大到19级
      setTimeout(function(){
    		map.setZoom(19);   
    	}, 4000);
      //启用滚轮放大缩小
      map.enableScrollWheelZoom(true);
    </script>

    3、实现结果

    (1)初始化时



    (2)过了4s之后



    4、附录

    (1)缩小

    <!DOCTYPE html>
    <html>
      <head>
        <title>放大地图</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak密钥"></script>
    	<style>
    		body,html,#map{
    			 100%;
    			height: 100%;
    			overflow: hidden;
    			margin: 0;
    			font-size: 12px;
    			font-family: "微软雅黑";
    		}
    	</style>
    
      </head>
      
      <body>
         <div id="map"></div>
      </body>
    </html>
    <script>
      //创建地图实例
      var map = new BMap.Map("map");
      //初始化地图
      map.centerAndZoom(new BMap.Point(114.309531, 30.59619),19);
      //放大到16级
      setTimeout(function(){
    		map.setZoom(5);   
    	}, 4000);
      //启用滚轮放大缩小
      map.enableScrollWheelZoom(true);
    </script>

    (2)初始化时



    (3)过了4s之后


  • 相关阅读:
    婚姻中媒人存在的客观逻辑——leo鉴书45
    为什么要使用RTP
    OCP-1Z0-053-200题-148题-485
    OCP-1Z0-053-200题-149题-78
    OCP-1Z0-053-200题-150题-236
    OCP-1Z0-053-200题-151题-53
    OCP-1Z0-053-200题-152题-56
    OCP-1Z0-053-200题-153题-211
    OCP-1Z0-053-200题-154题-208
    OCP-1Z0-053-200题-155题-218
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314194.html
Copyright © 2020-2023  润新知