百度地图插件
百度地图插件
小琴子_小白 发表于8个月前
百度地图插件
  • 发表于 8个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 用于jsp页面保存、修改数据(经纬度)操作

1、首先导入插件

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

2、jsp页面上显示地图的位置

      <tr>
        <th>经度</th>
        <td><form:input path="jd" readonly="true"/></td>
        <th>纬度</th>
        <td><form:input path="wd" readonly="true"/></td>
    </tr>
    <tr>
        <td colspan="4">
            <div style="border:1px solid #FF0000;padding:5px;margin:3px;width:300px">
                  <font style="font-size:14px;font-weight:bold; font-family:\'宋体\'">鼠标移置地图内,右击添加项目标注</font>
            </div>
        </td>
    </tr>
    <tr>
       <td colspan="4"><div id="container" style="position:relative; left:20px; top: 0px; width:95%; height:340px"></div></td>
    </tr>

3、加上地图样式

<script type="text/javascript">
var lng=$("#jd").val();
var lat=$("#wd").val();
var map = new BMap.Map("container");  
var has=0;
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
{
    text:'在此添加标注',
    callback:function(p){
        if(has==0){
            var marker = new BMap.Marker(p);
            marker.enableDragging();  
            marker.addEventListener("dragend", function(e){  
                $("#jd").val(e.point.lng);
                $("#wd").val(e.point.lat);
            });
            map.addOverlay(marker);
            $("#jd").val(p.lng);
            $("#wd").val(p.lat);
            has=1;
        }else{
            alert("您已经标注了项目位置,请拖动标注来修改项目位置");
        }
   }
  }
 ];
 for(var i=0; i < txtMenuItem.length; i++){
  contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
  if(i==1 || i==3) {
   contextMenu.addSeparator();
  }
 }
 
 if(lng>0&&lat>0){
        point=new BMap.Point(lng,lat);
        map.centerAndZoom(point, 16); 
        map.addControl(new BMap.NavigationControl());  
        map.addContextMenu(contextMenu);
        var marker = new BMap.Marker(point);
        marker.enableDragging();  
        marker.addEventListener("dragend", function(e){
            $("#jd").val(e.point.lng);
            $("#wd").val(e.point.lat);
        });
        map.addOverlay(marker);
        has=1;
}else{
        //创建地址解析器实例  
        var myGeo = new BMap.Geocoder();  
        myGeo.getPoint("越溪"
                ,function(point){
                     if (point) {
                         map.centerAndZoom(point, 16); 
                            map.addControl(new BMap.NavigationControl());  
                            map.addContextMenu(contextMenu);
                     }
        },"苏州市");}
}
</script>

 

 

共有 人打赏支持
粉丝 0
博文 5
码字总数 5035
×
小琴子_小白
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: