Bruce Chen's Blog

quick notes

0%

腾讯地图JavaScript API调用

发表于 分类于

1、加载地图 API

页面直接引入

1
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 网址是 API 文件的位置，v2.0 指当前使用的 API 的版本标识，key=[申请的开发密钥]

2、创建一个容纳地图的 div 容器

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

要使地图在网页上显示，必须为其在网页中创建一个容器。通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。

在上述示例中，我们定义名为 “container” 的 div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸。

3、地图基本对象

1
var map = new qq.maps.Map(document.getElementById('container'),myoptions);

表示地图的 JavaScript 类是 Map 类。此类的对象在页面上定义单个地图。我们使用 JavaScript new 操作符创建此类的一个新实例。当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。HTML 节点是 JavaScript document 对象的子节点，我们通过 document.getElementById() 方法获取对此元素的引用。此代码定义一个全局变量（名为 map），并将该变量分配给新的 Map 对象。函数 Map() 称为构造函数，其定义请参考《参考手册》

myoptions 是地图的配置对象。

4、初始化地图

1
map.panTo(new qq.maps.LatLng(39.916527,116.397128));

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

LatLng 是 latitude 经度 Longitude 纬度 缩写

5、加载地图

1
<body onload="init()">

当 HTML 页面显示时，文档对象模型 (DOM) 即会扩展，接收其他外部图像和脚本并将其合并到 document 对象中。为了确保只有在完全加载页面后才将我们的地图放在页面上，我们仅在 HTML 页面的 元素收到 onload 事件后才执行构造 Map 的函数。这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。body 标签的 onload 属性是事件处理程序的一个示例。腾讯 Maps Javascript API 还提供了一组事件，可供您进行处理以确定状态变化。有关详细信息，请参阅地图事件部分。

参考案例 1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>简单地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
        }
        *{
            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;
        }
        #container{
            min-width:600px;
            min-height:767px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script>
        window.onload = function(){
//直接加载地图
            //初始化地图函数  自定义函数名init
            function init() {
                //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                var map = new qq.maps.Map(document.getElementById("container"), {
                    center: new qq.maps.LatLng(39.916527,116.397128),      // 地图的中心地理坐标。latitude 经度 Longitude 纬度
                    zoom:8                                                 // 设置缩放级别
                });
            }
            //调用初始化函数地图,可以写在body中 <body onload="init()">
            // init();

            /*
            * function init() {
                  var myLatlng = new qq.maps.LatLng(-34.397, 150.644);
                  var myOptions = {
                    zoom: 8,
                    center: myLatlng,
                    mapTypeId: qq.maps.MapTypeId.ROADMAP
                  }
                  var map = new qq.maps.Map(document.getElementById("container"), myOptions);
              }
            * */
        }
    </script>
</head>
<body onload="init()">
<!--   定义地图显示容器   -->
<div id="container"></div>
</body>
</html>

地图事件

腾讯地图 API 具有事件接口，用户可以根据各自不同的需求添加不同的事件扩展。

目前腾讯地图提供的事件类型有两类:

  1. 用户事件（如“点击地图”鼠标事件）是从 DOM 传播到 腾讯 Maps API 中的。这些事件是独立的，并且与标准 DOM 事件不同。包括：单击事件(click)、双击事件(dblclick)、鼠标滑过事件(mouseover)、鼠标移动(mousemove)等；
  2. 腾讯地图 API 特有的事件，MVC 状态更改通知反映了腾讯 Maps API 对象中的更改，并以 property_changed 惯例命名。如：缩放级别更改事件(zoom_changed)、内容更改事件(content_changed)等。

1、添加地图点击事件

1
2
3
4
5
6
7
var listener = qq.maps.event.addListener(
    map,
    'click',
    function() {
        alert('您点击了地图。');
    }
);

使用 qq.maps.event.addListener() 可以将事件绑定到某一个对象上，返回一个监听者对象。方法第一个参数为被绑定事件的对象，第二个参数为事件类型，第三个参数为事件的处理方法。

2、事件中获取参数

addListener() 在事件被触发时会将 DOM 事件对象传入事件的处理方法，并在事件对象中添加鼠标当前位置的地理坐标属性 LatLng。

1
2
3
4
5
6
7
qq.maps.event.addListener(
    map,
    'click',
    function(event) {
        console.log('经度',event.latLng.lat,' 纬度:',event.latLng.lng);
    }
);

3、移除事件

1
2
3
4
5
6
7
8
9
var listener = qq.maps.event.addListener(
    map,
    'click',
    function() {
        alert('您点击了地图。');
    }
);
//移除 click 事件.
qq.maps.event.removeListener(listener);

地图控件

腾讯地图 API 控件是用户与地图交互的 UI 元素。API 提供多样的控件便于用户直接使用，并提供自定义控件 Control，最大限度满足用户需求。

目前腾讯地图 API 中提供的控件有：

  1. 导航控件
  2. 比例尺控件
  3. 自定义控件等

1、向地图添加控件

在地图上添加一个比例尺控件，并将控件放置在地图的左下角，可在代码中添加如下内容：

添加比例尺控件

1
2
3
4
5
6
7
8
9
10
11
12
map = new qq.maps.Map(
    document.getElementById("container"),
    {
        center: new qq.maps.LatLng(39.914850, 116.403765),
        zoom: 13
    }
);
var scaleControl = new qq.maps.ScaleControl({
    align: qq.maps.ALIGN.BOTTOM_LEFT,
    margin: qq.maps.Size(85, 15),
    map: map
});

地图覆盖物

覆盖物是指覆盖到地图上面的所有事物。覆盖物都有自己的地理属性，通过设置地理属性来控制覆盖物在地图中的显示位置。

腾讯地图 API 中的主要包括的覆盖物有：

  • 标注
  • 折线
  • 多边形
  • 圆形
  • 信息窗口等