最新公告
  • 晴天seo资源站,非精品不收录!立即加入我们
  • 帝国CMS添加百度地图标注方法

    给帝国CMS任意模型加上百度地图标注功能。

     

    第一步:首先在模型建立三个字段:
    字段名:map_x 字段类型:DOUBLE
    字段名:map_y 字段类型:DOUBLE
    字段名:map_z 字段类型:TINYINT 最好设置个默认值13 14左右,是调整缩放级别的
    系统模型该选的都选上,比如录入项、投稿项、可增加、可修改、内容模版。

    第二步:修改系统模型表单模版

    把这三个字段的代码删除改成:

     

    <tr><td width=’16%’ height=25 bgcolor=’ffffff’>标注地图</td>
    <td bgcolor=’ffffff’><a href=”javascript:void(0)” onclick=”showOrHide(1)”>点击地图标注</a></td></tr>

     然后在底部添加以下代码:

    <style>
    .belowdiv{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100% !important; width:100%;
    height: 100% !important; _height:1024px;
    background-color: gray;
    filter:alpha(opacity=20); opacity:0.2;
    z-index:1001;
    }
    .topdiv {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 582px;
    height: 450px;
    padding: 16px;
    border-top:solid,16px,red;
    border-left:1px;
    border-right:1px;
    border-bottom:1px;
    background-color: white;
    z-index:1002;
    overflow: auto;
    }
    </style>
    <script type="text/javascript">
    function showOrHide(flag) {
    if(flag == 1) {
    document.getElementById("top").style.display = "block";
    document.getElementById("below").style.display = "block";
    }
    if(flag == 2) {
    document.getElementById("top").style.display = "none";
    document.getElementById("below").style.display = "none";
    }
    }
    </script>
    <div id="top" class="topdiv">
    当前坐标:[!--map_x--] – [!--map_y--] 缩放:[!--map_z--] &nbsp;&nbsp;<a href = "javascript:void(0)" onclick = "showOrHide(2)">提交</a>
    <div style="width:520px;height:340px;border:1px solid gray" id="container">
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

    <script type="text/javascript">
    var map = new BMap.Map("container");
    var point = new BMap.Point(115.449106, 38.887932); //初始位置,我这个是保定可能是css原因,这个坐标位置偏移一点
    map.addControl(new BMap.NavigationControl()); //鱼骨控件显示
    map.enableScrollWheelZoom();
    map.centerAndZoom(point, 14); //初始缩放级别
    // 获取经度 纬度
    map.addEventListener("click", function(e){
    document.getElementById("map_x").value=e.point.lng;
    document.getElementById("map_y").value=e.point.lat;
    //下面这行是点击提示语,需要可以去掉 "//"
    // alert("系统已记录您标注的位置坐标");

    });
    // 获取缩放
    map.addEventListener("zoomend", function(){
    document.getElementById("map_z").value=this.getZoom();
    });
    // 设置个默认点,移动这个图标也可以获得坐标。不想要也可以删除
    var point = new BMap.Point(115.487362, 38.868383); // 默认标注图标位置
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中

    var opts = {
    width : 250, // 信息窗口宽度
    height: 100, // 信息窗口高度
    title : "温馨提示" // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("您可以移动此图标到您所在位置或点击您所在的位置,系统会自动获得坐标", opts); // 创建信息窗口对象

    marker.addEventListener("click", function(){
    this.openInfoWindow(infoWindow);
    });
    // 移动获取坐标
    marker.enableDragging();
    marker.addEventListener("dragend", function(e){
    document.getElementById("map_x").value=e.point.lng; //移动中心点改变坐标
    document.getElementById("map_y").value=e.point.lat;
    //下面这行是移动坐标提示语,需要可以去掉 "//"
    // alert("系统已记录您当前位置坐标:" + e.point.lng + ", " + e.point.lat + "");
    });

    </script>

    </div>

    <div id="below" class="belowdiv"></div>

    这样就可以把坐标和缩放级别存储于数据库了

    第三步:内容页模板中调用: 


    <script type=”text/javascript src=”http://api.map.baidu.com/api?v=1.2″></script>
    <div style=”width:520px;height:340px;border:1px solid gray id=”container></div>
    <script type=”text/javascript>
    var sContent =
    <h4 style=’margin:0 0 5px 0;padding:0.2em 0>[!--title--]</h4>” +
    <img style=’float:right;margin:4px id=’imgDemo src=[!--titlepic--] width=’139 height=’104 title=[!--title--]/> +
    <p style=’margin:0;line-height:1.5;font-size:13px;text-indent:2em;width:320px;>[!--smalltext--]</p>” +
    </div>”;
    var map = new BMap.Map(“container);
    var point = new BMap.Point([!--map_x--], [!--map_y--]);
    var marker = new BMap.Marker(point);
    var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象

    map.centerAndZoom(point, [!--map_z--]);
    map.addOverlay(marker);

    marker.addEventListener(“click, function(){
    this.openInfoWindow(infoWindow);
    //图片加载完毕重绘infowindow
    document.getElementById(‘imgDemo).onload = function (){
    infoWindow.redraw();
    }
    });
    </script>

     至此,地图标注功能便做好了。

     

    晴天seo
    晴天精品资源 » 帝国CMS添加百度地图标注方法

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    晴天seo
    一个高级程序员模板开发平台
    • 44会员总数(位)
    • 408资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 914稳定运行(天)

    晴天seo精品资源,优质插件

    开通会员 了解详情