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

最新推荐文章于 2025-11-18 16:45:15 发布

原创最新推荐文章于 2025-11-18 16:45:15 发布 · 5.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#地图

腾讯地图API 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用腾讯地图API在网页中嵌入地图，并通过经纬度显示具体位置。包括页面引入API、设置地图模板、利用JavaScript操作地图及Marker等关键步骤。

这里写图片描述

1.页面直接引入

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
//http://map.qq.com/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);
    }
}