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

原创 2017年02月18日 17:20:35

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

蚂蚁分类信息系统 5.8 PC端发布信息时地图标注感觉很不方便,需要先点击我要标注,还得拖动地图查找位置,  不熟悉地图的估计得找很长时间。  为方便快速、准确标注地理位置,修改蚂蚁分类信...

蚂蚁分类信息系统 5.8 增加七牛云存储插件

蚂蚁分类信息系七牛云存储 蚂蚁七牛云存储插件 集成七牛存储插件

蚂蚁分类信息系统 5.8 蚂蚁分类信息系统去除底部版权

蚂蚁分类信息系统 5.8 蚂蚁分类信息系统去除底部版权去除后找到文件template\default\inc_foot.html 第128行查找id=”foots”的相关信息把其中的信息替换成自己的...

蚂蚁分类信息系统5.8 数据标签调用方法(二)

该方法适用于5.8及以上版本的单城市和多城市版本。教程来源于其它网络截图,仅供参考...

蚂蚁分类信息系统 5.8 整合微信登录教程

1.首先要申请微信开发者账户并通过认证。 2.打开微信公众平台mp.weixin.qq.com 登录3.左侧找到 公众号设置4.点击 网页授权域名 填写域名 按要求上传验证文件到对应的目录5.开...

蚂蚁分类信息系统5.8 数据标签调用方法(三)

该方法适用于5.8及以上版本的单城市和多城市版本。教程来源于其它网络截图,仅供参考...

蚂蚁分类信息系统5.8 数据标签调用方法(四)

该方法适用于5.8及以上版本的单城市和多城市版本。教程来源于其它网络截图,仅供参考...

蚂蚁分类信息系统 5.8 信息浏览量后台自定义设置

mymps 蚂蚁分类信息是一款基于PHP+MySQL的建站系统,为在各种服务器上架设分类信息以及地方门户网站提供完美的解决方案. mymps5.8 下载 蚂蚁分类系统 5.8下载 蚂蚁分类系统下载...

蚂蚁分类信息系统5.8多城市UTF8开源优化版

蚂蚁分类信息系统5.8多城市UTF8开源优化版介绍 蚂蚁分类信息系统5.8多城市蚂蚁分类多城市蚂蚁分类信息系统5.8多城市蚂蚁分类信息系统 蚂蚁分类蚂蚁分类信息蚂蚁分类多城市蚂蚁分类企业版蚂蚁分类信...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:蚂蚁分类信息系统 5.8 百度地图标注优化
举报原因:
原因补充:

(最多只允许输入30个字)