【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 条评论
登录 后参与评论

相关文章

来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板-网站一键迁移教程(内测中)

1573
来自专栏蛋未明的专栏

nodejs学习指南

1906
来自专栏知晓程序

[好文回顾] 如何引导公众号粉丝进入小程序?

也许你已经知道,微信提供了「小程序关联公众号」的功能,而且小程序还能关联 50 个公众号。

792
来自专栏遊俠扎彪

Linux操作系统中删除ARP缓存的命令

在Windows下,使用比较多的两个操作ARP缓存的命令是arp -a和arp -d,前者是查看所有ARP条目,后者是删除所有ARP条目。

2189
来自专栏F-Stack的专栏

F-Stack与Seastar对比

本文是将知乎网友的提问 《如何评价腾讯开源的基于 DPDK 和 BSD 协议栈的网络框架 f-stack?》,将回答讨论内容和我们的一些想法进行了整理。 项目背...

3409
来自专栏小白客

冰点文库下载器,可以任性下载百度文库、道客巴巴等文档平台的收费文档

当我们在网上寻找一些文档时,好不容易找到了自己想要的文档资料,却被告知需要点券才能全文阅读或者需要点券才能下载文档。这个时候就需要下面这款神器: ◆ 第一步...

3646
来自专栏编程微刊

一个资源丰富的在线小程序社区推荐

想要自己做一款个人小程序,想做一款属于自己的小程序来开通流量主,但是技术又不够好的时候,来这里和我一起学习吧。这是一个很棒的社区,最重要的是每天会更新很多小程序...

783
来自专栏西安-晁州

meteor框架学习

meteor js的全栈开发框架,官方的解释: Meteor makes it an order of magnitude simpler, and a lot...

2360
来自专栏源码之家

kilu.de去广告

1736
来自专栏Youngxj

微信自动回复插件-xp框架

1403

扫码关注云+社区