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


  • 相关阅读:
    deep learning 以及deep learning 常用模型和方法
    神经网络和误差逆传播算法(BP)
    机器学习常见面试题整理
    Xcode8更新CocoaPods报错解决办法
    iOS、swift、React Native学习常用的社区、论坛
    iOS 一个app跳转另一个app并实现通信(如A跳到B并打开B中指定页面)
    Xcode LLDB Debug教程
    BLOCK封装带菊花的网络请求
    AFN的初步封装(post、GET、有无参数)
    银行卡格式化输出及后四位显示
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314194.html
Copyright © 2011-2022 走看看