百度地图在项目里的应用

实现添加显示坐标等功能

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <jsp:include page="http://www.cnblogs.com/include/include-detail.jsp"></jsp:include>
    <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script> 
    <script type="text/javascript">
        // 打开地图
        var loadMap = function(){ 
            $('#map').css({width:"500px", height:"300px"});
            var x = $("#positionX").val() || 119.32;
            var y =  $("#positionY").val() || 35.1244;
            
            var point=new BMap.Point(x,y); 
            var map = new BMap.Map('map');
            map.centerAndZoom(point, 15);
            
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            
            map.enableScrollWheelZoom();    
            // map.addControl(new BMap.MapTypeControl()); 
            
            map.addEventListener("click", function(e){
                $("#positionX").val(e.point.lng);
                $("#positionY").val(e.point.lat);
                
                point = new BMap.Point(e.point.lng, e.point.lat);
                map.removeOverlay(marker);
                marker = new BMap.Marker(point);
                map.addOverlay(marker);
            }); 
             
        };
   
        $(document).ready(function(){
            $(document).detail_page({
                contextPath:'<%=request.getContextPath()%>',
                entity : "county", 
                title : "区域",
                update : <s:property value="update"/>
            });
        });    
    </script>
</head>
<body>
<div class="container">

    <div class="location"></div>
    <div class="blank10"></div>
    <div class="block">
        <div class="h">
            <span class="icon-sprite icon-list"></span>
            <h3 class="second_title"></h3>
            <div class="bar">
                <a class="btn-lit" id="btn_back"><span>返回</span></a>
            </div>
        </div>
        <div class="tl corner"></div>
        <div class="tr corner"></div>
        <div class="bl corner"></div>
        <div class="br corner"></div>
        <div class="cnt-wp">
            <div class="cnt form">
                <s:form method="post" id="frm" theme="simple">
                       <table class="data-form" cellspacing="0" cellpadding="0">
                    <tbody>
                        <s:if test="update">
                        <tr>
                            <th scope="row">编号:</th>
                            <td>
                                  <s:textfield name="id" cssClass="input-normal" readonly="true" />
                            </td>
                        </tr>
                        </s:if>
                        <s:else>
                        <tr>
                            <th scope="row">编号:</th>
                            <td>
                                  <s:textfield name="id" cssClass="input-normal required" />
                            </td>
                        </tr>
                        </s:else>
                        <tr>
                            <th scope="row">名称:</th>
                            <td>
                                   <s:textfield name="name" cssClass="input-normal required" maxlength="50" />
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">坐标:</th>
                            <td>
                                X: <s:textarea id="positionX" name="x" cssClass="input-small"></s:textarea><br>
                                Y: <s:textarea id="positionY" name="y" cssClass="input-small"></s:textarea>
                                <a class="btn-lit" href="javascript:loadMap();" id="map-btn"><span>获取坐标</span></a><br>
                                <div id="map" style="display: hide;"></div>
                           </td>
                        </tr>
                        <tr>
                            <th scope="row">&nbsp;</th>
                            <td>
                                <a class="btn-lit" href="javascript:void(0);" id="save-btn"><span>确定</span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </s:form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/Akishimo/archive/2013/03/24/2979740.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值