zoukankan      html  css  js  c++  java
  • 百度地图-放大地图

    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之后


  • 相关阅读:
    VmWare 安装 Centos
    将博客搬至CSDN
    如何快速学习新的知识
    Git使用说明--常用命令
    App 冷启动:给 Android 的 Activity 添加一个背景
    Proguard中optimize设置不当引发SimException
    完美解决android软键盘监听
    修改Activity的继承类导致程序闪退
    非技术相关的面试技巧(文章内容来自他人博客)
    Android面试题(文章内容来自他人博客)
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314194.html
Copyright © 2011-2022 走看看