zoukankan      html  css  js  c++  java
  • 百度地图-定时器移动地图

    1、问题背景

         打开地图默认为武汉市,过了5秒中后地图定位到黄冈市,再过5秒定位到上海市


    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 {
        		 100%;
        		height: 100%;
        		margin:0;
        		font-family:"微软雅黑";
        	}
    		#map{
    			100%;
    			height: 100%;
    		}
        </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),18); 
        
        setTimeout(function(){
            //移动到黄冈市
    		map.panTo(new BMap.Point(114.880597,30.459173));   
    	}, 5000);
    	setTimeout(function(){
            //移动到上海市
    		map.panTo(new BMap.Point(121.477362,31.236058));   
    	}, 10000);
    </script>

    3、实现结果

    (1)初始化时



    (2)过了5秒后



    (3)再过5秒


  • 相关阅读:
    Noip2017 提高组初赛 游(baozha)记
    bzoj4557
    MVVM
    当下较热web前端技术汇总
    JQ 常见demo
    各种宽高
    JQuery 总结
    自定义滚动条配合鼠标滚轮demo
    H5 触摸事件
    SQL必备知识点
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314195.html
Copyright © 2011-2022 走看看