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

25.1 功能描述 当用户点击查看地图的按钮,就在页面上弹出一个窗口,上面显示百度地图对应的地点。

25.2 操作过程 首先,点击这个查看地图的按钮,我们要去打开一个新的窗口,这边依然使用bootstrap提供模态窗口。

修改查看地图的按钮代码:

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

这样一来,我们点击查看地图的按钮,就默认去打开一个ID为myMap的模态窗口。

<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>

效果:

在modal-body中嵌套一层iframe,用于指向百度地图。

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

为了控制这个模态窗口打开的时候执行一些其他的操作,我们最好用JS的方式去打开查看地图的按钮。

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

为了获取到家庭地址input框中的值,这边我们还需要去改变一下其input框的ID:

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

openMap:

//打开地图的方法
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);

}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MongoDB中文社区

MongoDB 4.0 RC 版本强势登陆

MongoDB 因其灵活的文档模型、可扩展分布式设计广受开发者喜爱,在此基础上,MongoDB 4.0 推出了更强大的功能支持,目前4.0第一个RC版本已经发布...

1002
来自专栏架构师之路

数据库秒级平滑扩容架构方案

一、缘起 (1)并发量大,流量大的互联网架构,一般来说,数据库上层都有一个服务层,服务层记录了“业务库名”与“数据库实例”的映射关系,通过数据库连接池向数据库路...

4588
来自专栏互联网研发闲思录

互联网研发中负载均衡算法一点探索

    负载均衡在线上服务中有着很重要作用,因为一台web服务比如tomcat,能够处理qps(每秒处理请求数) 是有限的。那么就需要有有前端负载均衡服务...

1946
来自专栏杨建荣的学习笔记

数据建模和数据映射的初步思考

今天和大家聊下关于数据建模和数据映射的事情,其实开始一个简单的项目的时候,我们的目标是很明确,而且所做的事情相对来说是比较简单的流程。

950
来自专栏阮一峰的网络日志

Git 工作流程

Git 作为一个源码管理系统,不可避免涉及到多人协作。 协作必须有一个规范的工作流程,让大家有效地合作,使得项目井井有条地发展下去。"工作流程"在英语里,叫做"...

34512
来自专栏IT笔记

Nginx学习之负载均衡

负载均衡 负载均衡 建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性...

3786
来自专栏腾讯移动品质中心TMQ的专栏

专治时间长 —5分钟测试Android覆盖安装

一、痛点 ? 覆盖安装测试,作为一项基本的测试类型是不可或缺的。它存在的主要价值: 验证老版本覆盖升级到新版本,用户和系统数据能够正确迁移,以及保障用户升级后的...

29210
来自专栏月牙寂

Golang分布式设计模式之-----星型拓扑分形设计

第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

2915
来自专栏JAVA高级架构

如何实现大型网站架构设计的负载均衡

负载均衡 (Load Balancing) 负载均衡建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处...

40010
来自专栏wannshan(javaer,RPC)

zookeepr--概览

zk 一个分布式应用协调服务 zk是一个分布式,开源的,分布式协调服务,他提供了一组简单的原生接口,分布式应用可以基于它实现,高水准的同步,集群,配置管理和命名...

3628

扫码关注云+社区