腾讯网网站内容定位( 腾讯地图开放平台教程)

　　腾讯网网站内容定位(

腾讯地图开放平台教程)

　　

　　腾讯地图定位及坐标分析

　　一个项目，需要打开地图点击获取地址

　　我用的是腾讯地图开放平台，在文档上花了一个上午才弄出来。

　　代码：

　　

    

    前端定位模块

    

 

     #pos-area{

         height:500px;

         width: 100%;

     }

     #poi_lat{color:red;}

     #poi_lng{color:green;}

     #poi_address{color:blue;}

 

    

    

    

    腾讯地图测试

    您在当的位置（经度：，纬度：）获取当前位置

            您点击的位置（经度：，纬度：，解析出来的地址：）

    

    

    

    var a*敏*感*词*ey ="A4KBZ-LUZE3-VPW3T-YGU5N-SIT2S-5ZFVH";

var geolocation = new qq.maps.Geolocation(a*敏*感*词*ey, "myapp");

var options = {timeout: 8000};

$(function(){

    //加载完成后就取当前位置 

    geolocation.getLocation(showPosition, showErr, options);

})

 

        function showPosition(position) {

            console.log(position);

            $('#now_lat').html(position.lat);

            $('#now_lng').html(position.lng);

            $('#poi_lat').html(position.lat);

$('#poi_lng').html(position.lng);

            //取出位置坐标了，设置地图显示出来

            var map = new qq.maps.Map(document.getElementById("pos-area"), {

                // 地图的中心地理坐标。

                center: new qq.maps.LatLng(position.lat,position.lng),

                zoom:15

            });

            //添加标记

            var marker = new qq.maps.Marker({

                position:  new qq.maps.LatLng(position.lat,position.lng),

                map: map

            });

            //解析地址

            jiexiaddress(position.lat,position.lng);

            //绑定地图点击事件

            qq.maps.event.addListener(map, "click", function (e) {

                $('#poi_lat').html(e.latLng.getLat().toFixed(6));

                $('#poi_lng').html(e.latLng.getLng().toFixed(6));

                //先移除标记，再添加标记

                marker.setMap(null);

                marker = new qq.maps.Marker({

                    position:  new qq.maps.LatLng(e.latLng.getLat(),e.latLng.getLng()),

                    map: map

                });

               jiexiaddress(e.latLng.getLat(),e.latLng.getLng());

            });

        };

 

        function showErr() { 

            alert("定位失败！"); 

        };

//解析地址

function jiexiaddress(lat,lng){

    var  url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key="+a*敏*感*词*ey+"&output=jsonp&&callback=?");

                $.getJSON(url3, function (result) {

                    if(result.result!=undefined){

                        $('#poi_address').html(result.result.address);

                    }else{

                        $('#poi_address').html('');

                    }

                })

}

 

　　效果图：

　　注意：如果您输入微信，则需要使用https地址获得权限。您可以在移动浏览器中打开它并使用它。记得在腾讯控制台打开webserviceapi并添加域名

　　预览地址：

　　

　　关于查找教程网络