自动放大缩小地图

最新推荐文章于 2023-05-06 12:01:16 发布

whucv

最新推荐文章于 2023-05-06 12:01:16 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：腾讯地图

本文链接：https://blog.youkuaiyun.com/archielau/article/details/39807437

腾讯地图专栏收录该内容

2 篇文章

订阅专栏

1、拷贝官网源代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>自动放大缩小</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
    width:603px;
    padding-top:3px;
    overflow:hidden;
}
.btn{
    width:142px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>

//
var init = function() {
    var map = new qq.maps.Map(document.getElementById("container"),{
        center: new qq.maps.LatLng(39.916527,116.397128),
        zoom: 4
    });
    setInterval(function() {
        map.zoomTo((map.getZoom() + 1) % 17);
    }, 2000);
}
</script>
</head>
<body οnlοad="init()">
<div style="width:603px;height:300px" id="container"></div>
<p>每隔2秒钟地图缩放级别增大一级别，到最大级时重设为最小级别。</p>
</body>
</html>

这里

onload 事件会在页面或图像加载完成后立即发生（html）。

setInterval是html DOM方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

创建地图与创建街景不同，创建街景为new qq.maps.Panorama，而创建地图使用API为

new qq.maps.Map

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素同时应用 class 和 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

说明一个文档只能有一个container（如何切换地图和街景呢？）

地图的构造函数需要传递地图的中心点纬经度：center，new qq.maps.LatLng，初始缩放级别为4

然后设置一个时钟：每隔两秒地图放大一个级别，最大到17级再重置（腾讯地图API的地图缩放级别为 4-17）（问题是这里getZoom（）返回值为0-16，与4-17并不完全一致，个人测试，这里地图级别小于1时重置为1，此时为世界地图，2为亚洲，3为中国全图（个人猜测）4显示各省份，最大可以放大到18级，大于18级不再变化。

通过 getZoom( )方法可以得到当前地图的缩放级别，通过 zoomTo( )方法可以修改地图的缩放级别。示例中定时每隔 2 秒钟将地图的缩放级别加 1，腾讯地图API的地图缩放级别为 4-17。

通过 panTo 方法来设置地图的中心点. map.panTo(newqq.maps.LatLng(39.914850, 116.403765));

纬度和经度

用来表示地图位置的方法。在腾讯 Maps API qq.maps.LatLng 对象提供了此类机制，来实现一个地理坐标位置。您可以构建一个 LatLng 对象，以 {纬度, 经度} 的顺序传递其参数：

 
        var
        myLatitude = 39.916527,myLongitude = 116.397128;
       
        var
        myLatLng = 
        new
        qq.maps.LatLng(myLatitude, myLongitude);

如果不知道一个地点（如“天安门”）的地理坐标，可以通过地址解析来得到。请注意：将“地址”转变为地理坐标的过程叫做“地址解析”。有关详细信息，请参见服务部分中的地址解析。也可以通过《参考手册》来具体了解这个接口如何去使用。

地图配置

使用腾讯地图 API 默认初始化的地图实例，用户可以对其进行鼠标拖拉、鼠标滚轮进行放大缩小以及鼠标双击放大等操作。我们通过修改地图的配置信息来决定是否希望用户能够通过鼠标操作修改地图状态。腾讯地图API提供了修改地图配置的接口：

 
        map = 
        new
        qq.maps.Map(
       
        document.getElementById(
        "container"
        ),
       
        {
       
        center:
        new
        qq.maps.LatLng(39.914850, 116.403765),
       
        zoom: 13,
       
        draggable:
        false
        ,
       
        scrollwheel:
        false
        ,
       
        disableDoubleClickZoom:
        false
       
        }
       
        );

setDraggable 用来设置地图是否能够鼠标拖拽，默认值为“可以”；
setScrollWheel 用来配置地图是否能够通过鼠标滚轮操作进行放大，默认值为“可以”；
setZoomInByDblClick 用来配置地图是否可以通过鼠标双击进行放大，默认值为“可以”。

地图 DOM 元素

源代码示例

 
        <div id=
        "container" 
         style=
        "width:500px; height:300px"
        ></div>

要使地图在网页上显示，必须为其在网页中留出一个位置。通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。在上述示例中，我们定义名为 "container" 的 div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸。

通过 Map 构造函数创建地图之后，还需要执行一个操作，即将其初始化。初始化通过地图的 panTo() 方法完成。panTo() 方法需要LatLng 经纬度坐标，并且调用此方法必须在对地图执行任何其它操作（包括设置地图本身的任何其它属性）之前。