用高德地图JS API获取位置经纬度并在当前页显示

前些天做一个项目的时候，需要录入商家的经纬度信息，以便用户可以查看附近的商家。

刚开始的时候由于开发时间紧，就用了一个比较笨的方法，让录入人员通过google地图的“这儿是什么”功能来查询经纬度，然后在把经纬度录入。这虽然能解决问题，但是比较麻烦，耗费时间比较多。

后来随着我们“附近”功能的升级，把客户端的地图API换成了高德地图，为了能使距离的精确性，后台录入也要使用高德地图。这时我就抽出时间把高德地图标注经纬度的方法研究了一下，终于解决了问题。

好了，废话不多说了，下面上方法~~

1.首先需要申请一个高德地图的key值，只有有了这个才能使用高德地图AP。申请地址，点击“获取KEY”，按步骤填空就行（绑定服务选择“JavaScript API”）~

2.准备工作做好了，下面上源码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>输入提示后查询，点击获取坐标</title>
    <style type="text/css">
        body{
            margin:0;
            height:100%;
            width:100%;
            position:absolute;
            font-size:12px;
        }
        #mapContainer{
            position: absolute;
            top:0;
            left: 0;
            right:0;
            bottom:0;
        }

        #tip{
            background-color:#fff;
            border:1px solid #ccc;
            padding-left:10px;
            padding-right:2px;
            position:absolute;
            min-height:65px;
            top:10px;
            font-size:12px;
            right:10px;
            border-radius:3px;
            overflow:hidden;
            line-height:20px;
            min-width:400px;
        }
        #tip input[type="button"]{
            background-color: #0D9BF2;
            height:25px;
            text-align:center;
            line-height:25px;
            color:#fff;
            font-size:12px;
            border-radius:3px;
            outline: none;
            border:0;
            cursor:pointer;
        }

        #tip input[type="text"]{
            height:25px;
            border:1px solid #ccc;
            padding-left:5px;
            border-radius:3px;
            outline:none;
        }
        #pos{
            height: 70px;
            background-color: #fff;
            padding-left: 10px;
            padding-right: 10px;
            position:absolute;
            font-size: 12px;
            right: 10px;
            bottom: 30px;
            border-radius: 3px;
            line-height: 30px;
            border:1px solid #ccc;
        }
        #pos input{
            border:1px solid #ddd;
            height:23px;
            border-radius:3px;
            outline:none;
        }

        #result1{
            max-height:300px;
        }
    </style>
</head>
<body>
    <div id="mapContainer" ></div>
    <div id="tip">
        <b>请输入关键字：</b>
        <input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)' style="width: 95%;"/>
        <div id="result1" name="result1"></div>
    </div>
    <div id="pos">
        <b>鼠标左键在地图上单击获取坐标</b>
        <br><div>X：<input type="text" id="lngX" name="lngX" value=""/>&nbsp;Y：<input type="text" id="latY" name="latY" value=""/></div>
    </div>

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您的Key值"></script>
    <script type="text/javascript">
        var windowsArr = [];
        var marker = [];
        var mapObj = new AMap.Map("mapContainer", {
            resizeEnable: true,
            view: new AMap.View2D({
                resizeEnable: true,
                zoom:13//地图显示的缩放级别
            }),
            keyboardEnable:false
        });
        var clickEventListener=AMap.event.addListener(mapObj,'click',function(e){
            document.getElementById("lngX").value=e.lnglat.getLng();
            document.getElementById("latY").value=e.lnglat.getLat();
        });


        document.getElementById("keyword").onkeyup = keydown;
        //输入提示
        function autoSearch() {
            var keywords = document.getElementById("keyword").value;
            var auto;
            //加载输入提示插件
                AMap.service(["AMap.Autocomplete"], function() {
                var autoOptions = {
                    city: "" //城市，默认全国
                };
                auto = new AMap.Autocomplete(autoOptions);
                //查询成功时返回查询结果
                if ( keywords.length > 0) {
                    auto.search(keywords, function(status, result){
                        autocomplete_CallBack(result);
                    });
                }
                else {
                    document.getElementById("result1").style.display = "none";
                }
            });
        }

        //输出输入提示结果的回调函数
        function autocomplete_CallBack(data) {
            var resultStr = "";
            var tipArr = data.tips;
            if (tipArr&&tipArr.length>0) {
                for (var i = 0; i < tipArr.length; i++) {
                    resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)
                                + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)
                                + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>";
                }
            }
            else  {
                resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
            }
            document.getElementById("result1").curSelect = -1;
            document.getElementById("result1").tipArr = tipArr;
            document.getElementById("result1").innerHTML = resultStr;
            document.getElementById("result1").style.display = "block";
        }

        //输入提示框鼠标滑过时的样式
        function openMarkerTipById(pointid, thiss) {  //根据id打开搜索结果点tip
            thiss.style.background = '#CAE1FF';
        }

        //输入提示框鼠标移出时的样式
        function onmouseout_MarkerStyle(pointid, thiss) {  //鼠标移开后点样式恢复
            thiss.style.background = "";
        }

        //从输入提示框中选择关键字并查询
        function selectResult(index) {
            if(index<0){
                return;
            }
            if (navigator.userAgent.indexOf("MSIE") > 0) {
                document.getElementById("keyword").onpropertychange = null;
                document.getElementById("keyword").onfocus = focus_callback;
            }
            //截取输入提示的关键字部分
            var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,"");
            var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
            document.getElementById("keyword").value = text;
            document.getElementById("result1").style.display = "none";
            //根据选择的输入提示关键字查询
            mapObj.plugin(["AMap.PlaceSearch"], function() {
                var msearch = new AMap.PlaceSearch();  //构造地点查询类
                AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
                msearch.setCity(cityCode);
                msearch.search(text);  //关键字查询查询
            });
        }

        //定位选择输入提示关键字
        function focus_callback() {
            if (navigator.userAgent.indexOf("MSIE") > 0) {
                document.getElementById("keyword").onpropertychange = autoSearch;
           }
        }

        //输出关键字查询结果的回调函数
        function placeSearch_CallBack(data) {
            //清空地图上的InfoWindow和Marker
            windowsArr = [];
            marker     = [];
            mapObj.clearMap();
            var resultStr1 = "";
            var poiArr = data.poiList.pois;
            var resultCount = poiArr.length;
            for (var i = 0; i < resultCount; i++) {
                resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
                    resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
                    addmarker(i, poiArr[i]);
            }
            mapObj.setFitView();
        }

        //鼠标滑过查询结果改变背景样式，根据id打开信息窗体
        function openMarkerTipById1(pointid, thiss) {
            thiss.style.background = '#CAE1FF';
            windowsArr[pointid].open(mapObj, marker[pointid]);
        }

        //添加查询结果的marker&infowindow
        function addmarker(i, d) {
            var lngX = d.location.getLng();
            var latY = d.location.getLat();
            var markerOption = {
                map:mapObj,
                icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
                position:new AMap.LngLat(lngX, latY)
            };
            var mar = new AMap.Marker(markerOption);
            marker.push(new AMap.LngLat(lngX, latY));

            var infoWindow = new AMap.InfoWindow({
                content:"<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
                size:new AMap.Size(300, 0),
                autoMove:true,
                offset:new AMap.Pixel(0,-30)
            });
            windowsArr.push(infoWindow);
           var aa = function (e) {
                var nowPosition = mar.getPosition(),
                    lng_str = nowPosition.lng,
                    lat_str = nowPosition.lat;
                infoWindow.open(mapObj, nowPosition);
                document.getElementById("lngX").value = lng_str;
                document.getElementById("latY").value = lat_str;
            };
            AMap.event.addListener(mar, "mouseover", aa);
        }

        //infowindow显示内容
        function TipContents(type, address, tel) {  //窗体内容
            if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
                type = "暂无";
            }
            if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
                address = "暂无";
            }
            if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
                tel = "暂无";
            }
            var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type;
            return str;
        }
        function keydown(event){
            var key = (event||window.event).keyCode;
            var result = document.getElementById("result1")
            var cur = result.curSelect;
            if(key===40){ //down
                if(cur + 1 < result.childNodes.length){
                    if(result.childNodes[cur]){
                        result.childNodes[cur].style.background='';
                    }
                    result.curSelect=cur+1;
                    result.childNodes[cur+1].style.background='#CAE1FF';
                    document.getElementById("keyword").value = result.tipArr[cur+1].name;
                }
            }else if(key===38){ //up
                if(cur-1>=0){
                    if(result.childNodes[cur]){
                        result.childNodes[cur].style.background='';
                    }
                    result.curSelect=cur-1;
                    result.childNodes[cur-1].style.background='#CAE1FF';
                    document.getElementById("keyword").value = result.tipArr[cur-1].name;
                }
            }else if(key === 13){
                var res = document.getElementById("result1");
                if(res && res['curSelect'] !== -1){
                    selectResult(document.getElementById("result1").curSelect);
                }
            }else{
                autoSearch();
            }
        }
    </script>
</body>
</html>

在线测试
PS：请把js引入部分的key值换成你申请下来的，要不然不能用哦~~

好了，下面打开页面试试效果吧。点击地图标注，打开高德地图，随便点击地图的一个位置，看看右下角是不是出现了经纬度？此方法还可以通过地图页下面的搜索进行位置查找~

更新：

2015-11-10：根据关键字搜索出结果后，鼠标放到“标注”(A、B、C、D等)上可直接显示对应的经纬度（Line:370）

本文共 47 个回复

lift 2016/09/22 13:58

你好，为什么搜索不能用

回复
- Specs 2016/09/23 08:34
  
  @ lift 看报错
  
  回复
  - 下一站读书 2017/12/28 14:48
    
    @ Specs 您好您这个搜索用不了呢
    
    回复
    - Specs 2017/12/31 11:23
      
      @ 下一站读书可以的啊
      
      回复
New 2016/11/01 09:25

你好！我是新人，能不能发一份我？

回复
- Specs 2016/11/01 21:48
  
  @ New 直接复制代码
  
  回复
Sagitario 2016/11/06 11:47

我也使用了高德地图浏览器定位的API，跟你最前面的那段差不多，它有一个oncomplete 函数得到经纬度信息通过dom方法显示到网页，我想在这个函数外部调用得到的经纬度，就是把它变成全局变量，怎么也不成功，想请教你一下改怎么写

回复
wll 2017/10/31 11:36

汉字乱码怎么解决

回复
- Specs 2017/11/25 09:38
  
  @ wll 字符编码不对
  
  回复
你好 2017/12/04 10:37

为什么不出地图

回复
- Specs 2017/12/10 09:34
  
  @ 你好 key 的类型选错了吧
  
  回复
啊 2018/02/07 15:35

您好，我想问一下我是用toolBar.doLocation()这个方法定位当前位置的，在这个方法后面我想用toolBar.getLocation()这个方法获取我的经纬度，为什么我alert不出来这个方法返回的值？只是告诉我undefined,我创建了一个返回值类型的对象也没用.

回复
- Specs 2018/03/11 09:01
  
  @ 啊这个没研究过
  
  回复
ss 2018/05/23 09:41

加一个三级联动定位大概位置，再模糊搜索就更好了。

回复
ss 2018/05/23 10:53

我的这个搜索也用不了Uncaught TypeError: Cannot set property 'onkeyup' of nulldocument.getElementById("keyword").onkeyup = keydown;

回复
- Specs 2018/06/04 23:06
  
  @ ss 你这页面上没有 id 为 keyword 这个输入框吧
  
  回复
Ylyao 2019/10/24 17:38

你好我想问一下就是怎么把点击得到的经纬度传给后端的Java程序呀？

回复
- Specs 2019/10/25 14:39
  
  @ Ylyao 通过 Ajax 调用后端接口就好了
  
  回复
- Specs 2019/10/25 14:51
  
  @ Ylyao 在 108 行那里是通过点击取到了经纬度，在这个后面通过 ajax 调用接口即可提交给后端。
  
  回复
张超 2019/11/07 16:34

地图出不来怎么弄麻烦帮看

回复
- Specs 2019/11/07 16:46
  
  @ 张超需要把 key 替换成你自己的
  
  回复
  - 张超 2019/11/07 16:47
    
    @ Specs key我换了的这里不能发截图选择的是JavaScript
    
    回复
    - 张超 2019/11/07 16:48
      
      @ 张超方便邮箱回复下联系方式吗给你发下截图
      
      回复

«12

Object Not Found!

用高德地图JS API获取位置经纬度并在当前页显示

本文共 47 个回复

lift 2016/09/22 13:58

Specs 2016/09/23 08:34

下一站读书 2017/12/28 14:48

Specs 2017/12/31 11:23

New 2016/11/01 09:25

Specs 2016/11/01 21:48

Sagitario 2016/11/06 11:47

wll 2017/10/31 11:36

Specs 2017/11/25 09:38

你好 2017/12/04 10:37

Specs 2017/12/10 09:34

啊 2018/02/07 15:35

Specs 2018/03/11 09:01

ss 2018/05/23 09:41

ss 2018/05/23 10:53

Specs 2018/06/04 23:06

Ylyao 2019/10/24 17:38

Specs 2019/10/25 14:39

Specs 2019/10/25 14:51

张超 2019/11/07 16:34

Specs 2019/11/07 16:46

张超 2019/11/07 16:47

张超 2019/11/07 16:48

发表评论取消

友情链接

本文共 47 个回复

lift 2016/09/22 13:58

Specs 2016/09/23 08:34

下一站读书 2017/12/28 14:48

Specs 2017/12/31 11:23

New 2016/11/01 09:25

Specs 2016/11/01 21:48

Sagitario 2016/11/06 11:47

wll 2017/10/31 11:36

Specs 2017/11/25 09:38

你好 2017/12/04 10:37

Specs 2017/12/10 09:34

啊 2018/02/07 15:35

Specs 2018/03/11 09:01

ss 2018/05/23 09:41

ss 2018/05/23 10:53

Specs 2018/06/04 23:06

Ylyao 2019/10/24 17:38

Specs 2019/10/25 14:39

Specs 2019/10/25 14:51

张超 2019/11/07 16:34

Specs 2019/11/07 16:46

张超 2019/11/07 16:47

张超 2019/11/07 16:48

发表评论 取消

友情链接

发表评论取消