地图API的"Hello, world!"
开始学习腾讯地图API最简单的方式是看一个简单的示例。例如，我们要显示以北京的天安门为中心的 603x300 地图，可以这样做：
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
function init() {
var map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(39.916527,116.397128)
});
}
</script>
加载地图 API
加载腾讯地图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的版本标识。
2、异步加载 JavaScript API：
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);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
document.body.appendChild(script);
}
window.onload = loadScript;
地图 DOM 元素
源代码示例
<div id="container" style="width:500px; height:300px"></div>
要使地图在网页上显示，必须为其在网页中留出一个位置。通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。在上述示例中，我们定义名为 “container” 的 div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸。
地图基本对象
源代码示例
var map = new qq.maps.Map(document.getElementById('container'));
表示地图的 JavaScript 类是 Map 类。此类的对象在页面上定义单个地图。我们使用 JavaScript new 操作符创建此类的一个新实例。当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。HTML 节点是 JavaScript document 对象的子节点，我们通过document.getElementById() 方法获取对此元素的引用。此代码定义一个全局变量（名为map），并将该变量分配给新的 Map 对象。函数 Map() 称为构造函数，其定义请参考《参考手册》。
初始化地图
源代码示例
map.panTo(new qq.maps.LatLng(39.916527,116.397128));
通过 Map 构造函数创建地图之后，还需要执行一个操作，即将其初始化。初始化通过地图的 panTo() 方法完成。panTo() 方法需要LatLng 经纬度坐标，并且调用此方法必须在对地图执行任何其它操作（包括设置地图本身的任何其它属性）之前。
加载地图
源代码示例
<body onload="init()">
当 HTML 页面显示时，文档对象模型 (DOM) 即会扩展，接收其他外部图像和脚本并将其合并到 document 对象中。为了确保只有在完全加载页面后才将我们的地图放在页面上，我们仅在 HTML 页面的 元素收到 onload 事件后才执行构造 Map 的函数。这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。body 标签的 onload 属性是事件处理程序的一个示例。腾讯 Maps Javascript API 还提供了一组事件，可供您进行处理以确定状态变化。有关详细信息，请参阅地图事件部分。