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

这里写图片描述

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);
    }
}

更多详尽的信息,可直接参考腾讯官方API: http://lbs.qq.com/javascript_v2/demo.html

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
/*=============================================== 作者:LXZ-2008 FROM:CUMT 计08级 时间:2012-04-22 功能:能在SDK、MFC编程中实现笛卡尔 坐标系统的绘制,以及曲线,点的绘制。 特性:1.本程序采用面向对象思想设计; 2.具备很好的独立性,随时可以把这两个文件应 用在任意SDK、MFC开发中; 3.有良好的灵活性,扩展性,易用性,在稍微扩 展一下可以绘制任意曲线,图形; 4.具备良好的组合性,符合模块内高内聚,模块 外低耦合的思路; 5.整个程序仅有1300行左右代码,如果嫌代码过 多,可以把原先变量的PROTECTED保护类型打开, 换成PUBLIC,这样去掉GET和SET函数,这个思路 起源于我对J2EE中STRUTS2框架的学习以及对COM 组件技术的了解,它们也是这种思路这时可以省 下几百行代码。 6.当然也会有设计模式的思路在里面。 个人说明: 本程序花了我将近2天的时间编写,尽管开始有点 不想,但是还是觉得有意义,能给广大网友提供益处。 本系统的雏形来自2010年下半年的程序,当时花了 10天时间,弄了3千行代码。在现在看来当时的程序的 执行效率未必比现在的低,但是可维护性糟糕,可拓展 性糟糕,不具备良好的灵活性。需求改变了,代码会大 幅改变。换句话说,现在看来当时的程序是十分糟糕的, 生命周期已经结束。 而在用了面向对象的思想和设计模式,以及一些数 据结构去重新搭建这个系统的时候,代码其实1千多行就 搞定了,时间3-4天,不需要那么多(现在我来弄的话)。 主要起源于自己参与真实的有数十万代码的项目的开发, 这样提高了对程序开发的认识,以及商业程序应该如何 开发。同时也是自己面向对象思想和设计模式学习,对 自身思想的提高。 希望阅读代码的人觉得这些代码是优雅的,这就满 足了,尽管注释少了些,你们自己加吧。 QQ:706625262 E-MAIL:[email protected] 不做商业和技术支持。 声明: 本程序代码未经本人同意,或者未给我MONEY的前提下, 不得用于商业目的,别让我鄙视你。在非商业目的使用 下请注明本人是原创,表学腾讯。 ==================================================*/

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值