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. LC 683. K Empty Slots 【lock，hard】

    There is a garden with N slots. In each slot, there is a flower. The N flowers will bloom one by one ...

  2. struts数据回显

    数据回显,必须要用struts标签! Action中: // 进入修改页面 public String viewUpdate() { // 模拟一个对象(先获取一个id,再根据id调用service查 ...

  3. pandas之DataFrame创建、索引、切片等基础操作

    知识点 Series只有行索引,而DataFrame对象既有行索引,也有列索引 行索引,表明不同行,横向索引,叫index,0轴,axis=0 列索引,表明不同列,纵向索引,叫columns,1轴,a ...

  4. Selenium 2自动化测试实战26（unittest单元测试框架）

    一.unittest单元测试框架 1.认识单元测试 1.断言方法 #计算器类 #coding:utf-8 #计算器类 class Count: def __init__(self,a,b): self ...

  5. Python 输出时去掉列表元组外面的方括号与圆括号

     

  6. C#编程 委托 Lambda表达式和事件

    委托 如果我们要把方法当做参数来传递的话,就要用到委托.简单来说委托是一个类型,这个类型可以赋值一个方法的引用. 声明委托 在C#中使用一个类分两个阶段,首选定义这个类,告诉编译器这个类由什么字段和方 ...

  7. Leetcode之广度优先搜索（BFS）专题-1162. 地图分析（As Far from Land as Possible）

    Leetcode之广度优先搜索(BFS)专题-1162. 地图分析(As Far from Land as Possible) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. ...

  8. cisco路由的ip静态路由添加（二）

    路由器Corp 配置Corp(config)#ip route 192.168.20.0 255.255.255.0 10.1.3.2 150 Corp(config)#ip route 192.16 ...

  9. 应用安全 - PHP - CMS - EmpireCMS - 漏洞 - 汇总

    2006 Empire CMS <= 3.7 (checklevel.php) Remote File Include Vulnerability Empire CMS Checklevel.P ...

  10. python 实现 灰色预测 GM(1,1)模型 灰色系统 预测 灰色预测公式推导

    来源公式推导连接 https://blog.csdn.net/qq_36387683/article/details/88554434 关键词:灰色预测 python 实现 灰色预测 GM(1,1)模 ...