威客QQ=>3479015851

ASP PHP WEB开发 解密源码 解除域名绑定限制

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

蚂蚁分类信息系统 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下载

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35921430/article/details/55669026
博主设置当前文章不允许评论。

<em>蚂蚁分类</em>系统4.0

2018年04月30日 0B 下载

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

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭