腾讯地图api（地址定位）

最新推荐文章于 2025-06-17 18:46:27 发布

原创最新推荐文章于 2025-06-17 18:46:27 发布 · 2.5w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#腾讯map

map 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在项目中引入腾讯地图API，通过提供一个简单的DEMO展示如何实现地址定位功能，包括加载带有key参数的JS库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入js(加key引用‘http://map.qq.com/api/js?v=2.exp&key=yourkey’)

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>

2、demo：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>


    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

</head>
<body>
    <div id="test" style="height: 500px"></div>


    <script type="text/javascript">



        var geo = new qq.maps.Geocoder()
        console.log(geo)
        geo.getLocation('中国,广州,沙太路268号')//地址
        geo.setComplete(function(res){
            console.log(res,res.detail.location)//得到经纬度
            var map = new qq.maps.Map(document.getElementById('test'),{
                center: res.detail.location,//将经纬度加到center属性上
                zoom: 16,//缩放   
                draggable: true,//是否可拖拽
                scrollwheel: true,//是否可滚动缩放
                disableDoubleClickZoom: false
            })
            var marker = new qq.maps.Marker({
                position: res.detail.location,//标记的经纬度
                animation: qq.maps.MarkerAnimation.BOUNCE,//标记的动画
                map: map//标记的地图
            })

            var citylocation = new qq.maps.CityService({
                //设置地图
                map : map,

                complete : function(results){
                    console.log(9999,results)
                }
            });
        })

    </script>


    <script type="text/javascript">
        console.log(returnCitySN,returnCitySN["cip"]+','+returnCitySN["cname"])//获取ip可进行ip定位
    </script>
</body>
</html>