1.页面直接引入

<script charset="utf-8" src="http://map.qq/api/js?v=2.exp"></script>
//http://map.qq/api/js?v=2.exp 网址是API文件的位置,v2.0 指当前使用的API的版本标识。

2.在html页面插入地图模板

<div id="siteMap"></div>

3.我们需要的经纬度可以选择一部请求的方式从后台获取,然后转换显示在页面上,
但是我的demo的页面是jsp,所以数据是后台直接带到页面上的,这里直接处理就好:

4.JS部分:
参考腾讯官方API的 反地址解析 和 为多个Marker添加事件

$(".li-left-sitemap").addClass("active")
function siteMap() {
    var center = new qq.maps.LatLng(39.916527,116.397128);
    var map = new qq.maps.Map(document.getElementById("siteMap"), {
        center: center,
        zoom: 5
    });

  //地址和经纬度之间进行转换服务
    geocoder = new qq.maps.Geocoder();
    //设置城市信息查询服务
    citylocation = new qq.maps.CityService();
    //请求成功回调函数
    citylocation.setComplete(function(result) {
        map.setCenter(result.detail.latLng);
    });
    //请求失败回调函数
    citylocation.setError(function() {
        alert("出错了,请输入正确的经纬度!!!");
    });
    citylocation.searchLocalCity();
    var infoWin = new qq.maps.InfoWindow({
        map: map
    });

    var infoWin = new qq.maps.InfoWindow({
        map: map
    });

    var latlngs = new Array(); 
    $(".siteData").each(function(){
        var lat = $(this).find(".siteLat").html(); 
        var lng =$(this).find(".siteLng").html();
        latlngs.push(new qq.maps.LatLng(lat,lng));
    })
    for(var i = 0;i < latlngs.length; i++) {
        geocoder.getAddress(latlngs[i]);
        (function(n){
            geocoder = new qq.maps.Geocoder({
                  complete : function(result){
                        map.setCenter(result.detail.location);
                        var marker = new qq.maps.Marker({
                            map: map,
                            position: result.detail.location
                        });

                        qq.maps.event.addListener(marker, 'click', function() {
                            infoWin.open();
                            infoWin.setContent('<div style="width:100%;height:100%;">' +
                                    result.detail.address    + '</div>');
                            infoWin.setPosition(result.detail.location);
                        });
                  }
            });
        })(i);
    }
}

更多详尽的信息,可直接参考腾讯官方API: http://lbs.qq/javascript_v2/demo.html

更多推荐

如何在腾讯地图绘制自己的坐标