蚂蚁分类信息系统 5.8 百度地图标注优化

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35921430/article/details/55669026

蚂蚁分类信息系统 5.8 PC端发布信息时地图标注感觉很不方便,需要先点击我要标注,还得拖动地图查找位置,
不熟悉地图的估计得找很长时间。
这里写图片描述

为方便快速、准确标注地理位置,修改蚂蚁分类信息系统 5.8 PC端发布信息时地图标注
功能。修改后效果如下图 支持地址检索 自动获取经纬度 直接确认

打开百度地图标注
这里写图片描述
输入待标注的地址 支持模糊查询
这里写图片描述
选择地址
这里写图片描述
确认正确 点我标注
这里写图片描述
完成标注
这里写图片描述

友情提醒:修改后系统仅支持百度地图,使用其它地图的请不要参考本操作。
修改方法

1.找到文件template\box\map.html

第7行增加

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=[百度申请AK值]"></script>

第12-22行替换成

function besuremark() {
    var point = document.getElementById("result_").value;
    if(point == ''){
        if(!confirm('您尚未标注地图\n\n确认保存吗?')) return false;
    } else {
        parent.document.getElementById('mappoint').value =point;
        alert('地理位置标注成功!');
    }
    parent.closeopendiv();
}

标签以后的内容替换为

<body style="background:#CBE1FF">
    <div style="width:730px;margin:auto;">   
        地址:<input id="text_" type="text" style="width:200px;" value=""/>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        经纬度:<input id="result_" type="text" />
        <input type="button" value="确认正确,点我标注" onclick="besuremark();"/>
        <div id="container" 
            style="position: absolute;
                margin-top:30px; 
                width: 730px; 
                height: 590px; 
                top: 50; 
                border: 1px solid gray;
                overflow:hidden;">
        </div>
    </div>
</body>
</html>



<script type="text/javascript">

function G(id) {
    return document.getElementById(id);
}
function showInfo(e){
    alert(e.point.lng + ", " + e.point.lat);
}

    var map = new BMap.Map("container");
    var _initPoint = new BMap.Point(120.888035,30.04088);
    map.centerAndZoom(_initPoint,19);
    var marker = new BMap.Marker(_initPoint); 
    map.addOverlay(marker);
    marker.setAnimation(BMAP_ANIMATION_BOUNCE);

    map.enableScrollWheelZoom(); 
    map.enableContinuousZoom(); 

    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.OverviewMapControl()); 
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));

    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); 


    var ac = new BMap.Autocomplete(   
            {
                "input" : "text_",
                "location" : map
            }
    );

    ac.addEventListener("onhighlight", function(e) { 
        var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }    
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }    
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });


    var myValue;
    ac.addEventListener("onconfirm", function(e) {  

    var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    function setPlace(){
        map.clearOverlays();  
        function myFun(){

            var pp = local.getResults().getPoi(0).point;   
            document.getElementById("result_").value = pp.lng + "," + pp.lat;

            map.centerAndZoom(pp,19);
            var marker = new BMap.Marker(pp);
            map.addOverlay(marker);

        }
        var local = new BMap.LocalSearch(map, { 
          onSearchComplete: myFun
        });
        local.search(myValue);
    } 
    map.addEventListener("click", showInfo);

function searchByStationName() {
    map.clearOverlays();
    var keyword = document.getElementById("text_").value;
    localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);
        document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
        map.centerAndZoom(poi.point, 19);
        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); 
        map.addOverlay(marker);
        var content = document.getElementById("text_").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat+"<br/>如有误请输入详细的小区名称重新查询";
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        marker.openInfoWindow(infoWindow);

        marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
    });
    localSearch.search(keyword);
} 
</script>

使用本套系统的朋友,需要定制功能的,可以留言,会根据需求一起开发完善。
mymps 蚂蚁分类信息是一款基于PHP+MySQL的建站系统,为在各种服务器上架设分类信息以及地方门户网站提供完美的解决方案.
mymps5.8 下载 蚂蚁分类系统 5.8下载 蚂蚁分类系统下载 mymps下载

博主设置当前文章不允许评论。

没有更多推荐了,返回首页