html5页面中添加腾讯地图api

本是古典何须时尚 2022-05-26 01:41 550阅读 0赞

html5页面中添加腾讯地图api：  
![这里写图片描述][70]  
点击地图出现详细的地图：  
![这里写图片描述][70 1]  
这是一个基于微信端的地图处理方案。  
先看看html架构：

然后是重点的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)

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

[70]: /images/20220526/772ab3fb946a46d891e270c9b28a94a4.png
[70 1]: /images/20220526/900c65ecc728466db802873b0135b7c0.png
[Link 1]: http://lbs.qq.com/javascript_v2/index.html