html5页面中添加腾讯地图api

html5页面中添加腾讯地图api：

点击地图出现详细的地图：

这是一个基于微信端的地图处理方案。
先看看html架构：

<a id="aToMap" href="">
    <div class="map" id="map-container">
    </div>
</a>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>

然后是重点的js:

var citylocation,map,marker = null;
//给外层的a标签加上url，方便一会点击小地图的时候直接跳转。
function newMapGo(id,lat,lng){
            var markUrl = 'https://apis.map.qq.com/tools/poimarker' +
                '?marker=coord:' + lat + ',' + lng + 
                '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';
                //给位置展示组件赋值
                document.getElementById(id).href = markUrl;
       }
//需要外层元素id和对应地址的经纬度
function newMap(id,lat,lng){
    var center = new qq.maps.LatLng(lat, lng);
    var map = new qq.maps.Map(document.getElementById(id), {
        center: center,
        zoom: 18
    });
    //调用城市服务信息
    citylocation = new qq.maps.CityService({
        complete : function(results){
            map.setCenter(results.detail.latLng);
            if (marker != null) {
               // marker.setMap(null);
            }
            //设置marker标记
            marker = new qq.maps.Marker({
                map: map,
                position: results.detail.latLng
            });
        }
    });
     citylocation.searchCityByLatLng(center);
     newMapGo('aToMap',lat,lng);
}
//给id,经纬度
newMap('map-container',23.12463,113.36199)

更多接口可以参考腾讯地图开放者官网