【php增删改查实例】- 第二十八节 查看地图的功能实现

<button style="float: right;" type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myMap">查看地图</button>

<div class="modal fade" id="myMap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="width: 800px">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">家庭地址</h4>
      </div>

      <div class="modal-body" >
            <iframe id="map" frameborder=0 scrolling='auto' style='width:100%;height:400px'></iframe>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<div class="modal-body">
     <iframe id="map" frameborder=0 scrolling='auto' style='width:100%;height:100%'></iframe>
</div>

<button style="float: right;" type="button" class="btn btn-primary" onclick="openMap()">查看地图</button>

<input type="text" class="form-control" id="addr" aria-describedby="inputWarning2Status" value="<?php echo $addr;?>">

//打开地图的方法
function openMap(){

    $("#myMap").modal("show");

    var addr = $("#addr").val();

    $("#map").attr("src","http://map.baidu.com/?newmap=1&ie=utf-8&s=s%26wd%3D"+addr);

}