1.IP定位切换

2.点击坐标获取地点

3.查询地点切换坐标

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>简单地图</title>

    <meta name="viewport"

        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <style type="text/css">

        html,

        body {

            width: 100%;

            height: 100%;

        }

        * {

            margin: 0px;

            padding: 0px;

        }

        body,

        button,

        input,

        select,

        textarea {

            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;

        }

        p {

            width: 603px;

            padding-top: 3px;

            overflow: hidden;

        }

        .btn {

            width: 142px;

        }

        #container {

            height: 90%;

            width: 99%;

            text-align: center;

        }

    </style>

    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=MJABZ-YGGL5-IBIIN-Q5Z45-FMOI7-VIBGN"></script>

    <script src="jquery.min.js"></script>

    <script>

        //1. 通过传入地址 定位到地址

        //2. 通过查询地址 地图定位到地址

        //3. 通过地图点击定位，获取到具体地址

        var MAP_GLOAP = {

            CURR_MAP: [28.21409, 112.89173], //当前坐标

            CURR_ADR: null, //当前地址

            KEY: 'MJABZ-YGGL5-IBIIN-Q5Z45-FMOI7-VIBGN',

            map: null, //地图对象

            Maker: null, //标记（单个）

            SearchInput: "#mapSearch",//查询文本框

            SearchBT: "#mapSearchBT" //查询按钮

        };

        //刷新查询列表

        var RefSearch = function () {

            console.log(MAP_GLOAP);

            $(MAP_GLOAP.SearchInput).val(MAP_GLOAP.CURR_ADR);

        };

        //增加打标

        var AddMark = function () {

            var center = new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]);

            if (MAP_GLOAP.Maker) {

                MAP_GLOAP.Maker.setMap(null);

            }

            MAP_GLOAP.Maker = new qq.maps.Marker({

                position: center,

                map: MAP_GLOAP.map

            });

        };

        //刷新坐标

        var RefMap = function () {

            var center = new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]);

            MAP_GLOAP.map.panTo(center);

        }

        //通过IP获取定位

        var IpMap = function () {

            //如果有值的话就不需要重新定位

            if( MAP_GLOAP.CURR_ADR) return;

            var data = {

                    address: MAP_GLOAP.CURR_ADR,

                    key: MAP_GLOAP.KEY, //key为自己向腾讯地图申请的密钥

                    output: "jsonp"

                };

                var url = "http://apis.map.qq.com/ws/location/v1/ip";

                $.ajax({

                    type: "get",

                    dataType: 'jsonp',

                    data: data,

                    jsonp: "callback",

                    jsonpCallback: "QQmap",

                    url: url,

                    success: function (res) {

                        console.log(res);

                        if (res && res.result.location) {

                            MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];

                            //刷新坐标轴

                            RefMap();

                            //刷新maker

                            AddMark();

                            //刷新输入框

                            RefSearch();

                        }

                        else {

                            alert("暂时没有查到该地区，请重新在试下！");

                        }

                    },

                    error: function (err) {

                        alert("服务端错误，请刷新浏览器后重试");

                    }

                });

        }

        //地址查询

        var SearchMap = function () {

            //1.获取地址名称，转译坐标

            //2.设置坐标，重新载入地图

            $(MAP_GLOAP.SearchBT).click(function () {

                MAP_GLOAP.CURR_ADR = $(MAP_GLOAP.SearchInput).val();

                if (!MAP_GLOAP.CURR_ADR || MAP_GLOAP.CURR_ADR < 0) {

                    alert("查询数据不能为空");

                }

                var data = {

                    address: MAP_GLOAP.CURR_ADR,

                    key: MAP_GLOAP.KEY, //key为自己向腾讯地图申请的密钥

                    output: "jsonp"

                };

                var url = "http://apis.map.qq.com/ws/geocoder/v1/";

                $.ajax({

                    type: "get",

                    dataType: 'jsonp',

                    data: data,

                    jsonp: "callback",

                    jsonpCallback: "QQmap",

                    url: url,

                    success: function (res) {

                        console.log(res);

                        if (res && res.result.location) {

                            MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];

                            //刷新坐标轴

                            RefMap();

                            //刷新maker

                            AddMark();

                            //刷新输入框

                            RefSearch();

                        }

                        else {

                            alert("暂时没有查到该地区，请重新在试下！");

                        }

                    },

                    error: function (err) {

                        alert("服务端错误，请刷新浏览器后重试");

                    }

                });

            })

        }

        //初始化

        var init = function () {

            //定义map变量

            MAP_GLOAP.map = new qq.maps.Map(document.getElementById("container"), {

                center: new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]),      // 地图的中心地理坐标。

                zoom: 10  // 地图的中心地理坐标。

            });

            //添加监听事件

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

                MAP_GLOAP.CURR_MAP = [e.latLng.getLat().toFixed(5), e.latLng.getLng().toFixed(5)];

                var data = {

                    location: MAP_GLOAP.CURR_MAP[0] + ',' + MAP_GLOAP.CURR_MAP[1],

                    key: MAP_GLOAP.KEY, //key为自己向腾讯地图申请的密钥

                    get_poi: 0

                };

                var url = "http://apis.map.qq.com/ws/geocoder/v1/?";

                data.output = "jsonp";

                $.ajax({

                    type: "get",

                    dataType: 'jsonp',

                    data: data,

                    jsonp: "callback",

                    jsonpCallback: "QQmap",

                    url: url,

                    success: function (res) {

                        console.log(res);

                        MAP_GLOAP.CURR_ADR = res.result.address;//  `${res.result.address_component.province}${res.result.address_component.city}${res.result.formatted_addresses.recommend}`;

                        MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];

                        //刷新坐标轴

                        RefMap();

                        //刷新maker

                        AddMark();

                        //刷新输入框

                        RefSearch();

                    },

                    error: function (err) {

                        //  alert("服务端错误，请刷新浏览器后重试");

                    }

                });

                AddMark;

            });

        }

        window.onload = function () {

            //当前ip获取地址

            IpMap();

            //初始化地图函数  自定义函数名init

            init();

            //地址查询功能

            SearchMap();

        }

    </script>

</head>

<body>

        <input type="text" value="" id="mapSearch"><button id="mapSearchBT" value="">查询</button>

    <!--   显示地图的区域   -->

    <div id="container"></div>

</body>

　　

C# 直接可用模板：

//调用

　　

腾讯地图JSAPI开发demo 定位，查询的更多相关文章

  1. 有关于腾讯地图服务端IP定位接口的获取当前城市的处理

    接口说明:http://apis.map.qq.com/ws/location/v1/ip 说明里面写了ip可以缺省,然并卵,经过测试的到结果并不能获取到当前城市,理由是腾讯ip库的对应ip精度没有定 ...

  2. 百度地图 JSAPI使用 mark 定位地址 与周边覆盖物

    http://lbsyun.baidu.com/index.php?title=jspopular   api  http://developer.baidu.com/map/jsdemo.htm#a ...

  3. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息，wx.getLocation，腾讯地图小程序api，微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  4. Taro开发微信小程序之利用腾讯地图sdk标记

    首先要下载腾讯地图提供的sdk,放在项目的对应目录下,引用. import QQMapWX from '../../sdks/qqmap-wx-jssdk' 设置好后,就可以开始使用了. let qq ...

  5. 地图API使用文档-以腾讯地图为例

    目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...

  6. 基于MFC与第三方类CWebPage的百度地图API开发范例

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  7. H5端调起百度地图、腾讯地图app

    来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在 ...

  8. 微信小程序--百度地图坐标转换成腾讯地图坐标

    最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...

  9. iOS开发那些事-iOS6苹果地图实用开发

    在iOS 6之后,不再使用谷歌地图了,而是使用苹果自己的地图,但是API编程接口没有太大的变化.开发人员不需要再学习很多新东西就能开发地图应用,这是负责任的做法.因此本节介绍的内容也同样适用于iOS5 ...

随机推荐

  1. [sh]shell语法小结

    参考 基础语法 数字比较 -lt -eq -gt [ `ps -ef|grep nginx|grep -v grep|wc -l` -eq 0 ] str比较 == != [ $USER == &qu ...

  2. FTP\SFTP连接命令

    五.ftp连接     输入:ftp 10.18.49.19 2121六.输入账号密码  zhangsan/sdjg34t#七.输入:ls    查看文件是否上传       如上传 输入:bye   ...

  3. JAVA记事本的图形用户界面应用程序含加密

    JAVA记事本的图形用户界面应用程序 加密 题目简介: 整体分析: 实验代码: import java.awt.EventQueue; import java.awt.event.ActionEven ...

  4. stringstream 类型转换

    stringstream可以吞下不同的类型,然后吐出不同的类型. 这样可以实现int,string,double等类型的转换 #include<sstream> using namespa ...

  5. 科学论文写作 Tips

    感觉还是课程中给的英文描述会比较好,所以笔记大多数还是以老师的原英文 PPT 为主 1 Steps in the Writing Process 如何开展论文写作以及各个步骤的时间分配 1-1 Pre ...

  6. springboot集成springcloud，启动时报错java.lang.AbstractMethodError: null

    出现这个问题是springboot和springcloud的版本不匹配. 我此处使用了springboot 2.0.4.RELEASE,springcloud 使用了Finchley.SR2. 修改方 ...

  7. Mybatis操作数据时出现：java.sql.SQLSyntaxErrorException: Unknown column 'XXX' in 'field list'

    这个错误比较重要,而且很常见,故单独进行说明: Mybatis出现:Unknown column 'xxx' in 'field list' 先来看一下程序的内部: dao.addUser(" ...

  8. HTTP 请求中的 Form Data 与 Request Payload 的区别

    HTTP 请求中的 Form Data 与 Request Payload 的区别 前端开发中经常会用到 AJAX 发送异步请求,对于 POST 类型的请求会附带请求数据.而常用的两种传参方式为:Fo ...

  9. pickle.dump()和pickle.load()

    python的pickle模块实现了基本的数据序列和反序列化. 通过pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,永久存储: 通过pickle模块的反序列化操作,我们能够从 ...

  10. python 实例化 类方法 静态方法 成员变量 实例方法 等调用

    1.参考代码如下 # coding:utf-8 class student: # 成员变量 ok = None like = '八戒你瘦了' # 实例方法 def __init__(self): # ...