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


  • 相关阅读:
    CSS处理小技巧
    React 脚手架构建
    Tomcat8学习
    javaScript(ES5中的类,原型,原型对象和函数对象的关系)
    保留两位小数(逢5进位,精度不会丢失)
    获取过去12个月
    mybatis 踩坑记录
    动态代理--jdk和cglib
    lambda表达式
    mybatis的mapper映射配置文件详解
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314194.html
Copyright © 2011-2022 走看看