百度地图地图标注经纬度

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>地图标注经纬度</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    
    <link rel="stylesheet" href="dist/layui.css" media="all" />
    <script src="dist/jquery-1.11.3.min.js"></script>
    <script src="dist/layer.js"></script>
    
</head>
<body>


<div class="admin-main layui-anim layui-anim-upbit" ng-app="hd" ng-controller="ctrl">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label must" >地理位置</label>
                <div class="layui-input-inline" style=" 100px;">
                    <input type="text" id="risenemLng" readonly  name="longitude" value="0"  placeholder="请标注位置" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style=" 100px;">
                    <input type="text" id="risenemLat" readonly  name="latitude" value="0"  placeholder="请标注位置" class="layui-input">

                </div>

                <button type="button" class="layui-btn layui-btn-normal" onClick="dz()">标注位置</button>
                <div class="layui-form-mid layui-word-aux" id="risenemEventplace"></div>
            </div>
        </div>

        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=uGkn6BcgfeV0RXiAScw9K2vq8ccZNBcyNczvH"></script>
        <script>
            //弹出地图
            function dz(){
                layer.open({
                    type: 2,
                    title: '标注位置',
                    shadeClose: true,
                    shade: 0.8,
                    btn: ['确认'],
                    anim:0,
                    area: ['60%', '70%'],
                    <!-- content: "/wyoshop/wms/maps", //iframe的url -->
                    content: "/maps.html", //iframe的url
                    scrollbar: false
                });

            }
        </script>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn submit" lay-submit="" lay-filter="submit">提交</button>
                <a href="index" class="layui-btn layui-btn-primary">返回</a>
            </div>
        </div>
    </form>
</div>

<script>
    $(document).ready(function(){
        $(".submit").click(function(){
            
        });
    });
</script>



</body>
</html>
View Code

maps.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="dist/jquery-1.11.3.min.js"></script>
</head>

<body>
<style>
    #mapContainer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .am-g{background:#fff}
    #tip {
        background-color: #fff;
        border: 1px solid #ccc;
        padding-left: 10px;
        padding-right: 2px;
        position: absolute;
        min-height: 65px;
        top: 10px;
        font-size: 12px;
        left: 10px;
        border-radius: 3px;
        overflow: hidden;
        line-height: 20px;
        min- 30%;
        z-index: 999999;
    }

    #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: 80px;
        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;
        z-index: 99999;
    }

    #pos input {
        border: 1px solid #ddd;
        height: 23px;
        border-radius: 3px;
        outline: none;
         100px;
    }

    #result1 {
        display: none;
    }

    b {
        display: block;
        margin: 5px 0;
        color: red;
    }

    .amap-info-content {
        font: 1px arial, sans-serif;
        overflow: visible;
        padding-top: 4px;
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
        color: #777;
    }

    .amap-info-content h3 {
        color: #CC5522;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        padding-right: 13px;
        white-space: nowrap;
        margin: 5px 0px;
    }

</style>

<!--地图容器-->
<div id="mapContainer"></div>

<div id="tip">
    <b>请输入关键字：</b>
    <input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)' style=" 95%;"/>
    <div id="result1" name="result1"></div>
</div>

<div id="pos">
    <b>请鼠标左键在地图上单击获取坐标</b>
    <div>经度：<input type="text" id="lngX" name="lngX" readonly value=""/> 纬度：<input readonly type="text" id="latY"
                                                                                   name="latY" value=""/></div>
    <div style="display: none">城市：<input type="text" id="llcity" readonly name="llcity" value=""/></div>
</div>


<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=2f5b982deca94574456ca573c2bd4874"></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
    });
    mapObj.setDefaultCursor("pointer");
    var clickEventListener = AMap.event.addListener(mapObj, 'click', function (e) {
        console.log(e);
        document.getElementById("lngX").value = e.lnglat.getLng();
        document.getElementById("latY").value = e.lnglat.getLat();
        AMap.service('AMap.Geocoder', function () {
            //实例化Geocoder
            geocoder = new AMap.Geocoder({
                city: ""//城市，默认：“全国”
            });
            var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];//地图上所标点的坐标
            geocoder.getAddress(lnglatXY, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    //获得了有效的地址信息:
                    //即，result.regeocode.formattedAddress
                    //console.log(result);
                    var city = result.regeocode.addressComponent.city;
                } else {
                    var city = '获取失败';
                    //获取地址失败
                }
                document.getElementById("llcity").value = city;

                var _iframe = window.parent;//获取父页面中的窗口对象（index1.html
                var risenemLng = _iframe.document.getElementById("risenemLng").value = e.lnglat.getLng();
                var risenemLat = _iframe.document.getElementById("risenemLat").value = e.lnglat.getLat();

                console.log(city);
            });
        })


    });


    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);
            //console.log(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="https://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: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.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="#1E9FFF">  " + (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 autoData = 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.service('AMap.Geocoder', function () {
                //实例化Geocoder
                geocoder = new AMap.Geocoder({
                    city: ""
                });
                var lnglatXY = [lng_str, lat_str];
                geocoder.getAddress(lnglatXY, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        //获得了有效的地址信息:
                        //即，result.regeocode.formattedAddress
                        //console.log(result);
                        var city = result.regeocode.addressComponent.city;
                    } else {
                        var city = '获取失败';
                        //获取地址失败
                    }
                    document.getElementById("llcity").value = city;
                    console.log(city);
                });
            })
        };
        AMap.event.addListener(mar, "mouseover", autoData);
        AMap.event.addListener(mar, "click", function (e) {
            var nowPosition = mar.getPosition(),
                lng_str = nowPosition.lng,
                lat_str = nowPosition.lat;
            document.getElementById("lngX").value = lng_str;
            document.getElementById("latY").value = lat_str;
            var _iframe = window.parent;//获取父页面中的窗口对象（index1.html
            var risenemLng = _iframe.document.getElementById("risenemLng").value = lng_str;
            var risenemLat = _iframe.document.getElementById("risenemLat").value = lat_str;

            console.log(lng_str);
        });
    }

    //infowindow显示内容
    function TipContents(type, address, tel) {  //窗体内容

        if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
            address = "暂无";
        }

        var str = "  地址：" + address;
        return str;
    }

    function keydown(event) {
        var key = (event || window.event).keyCode;
        var result = document.getElementById("result1");
        var cur = result.curSelect;
        if (key === 40) {
            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) {
            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>
View Code

---------------------------

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cuizhenyu/p/14792511.html