在jquery boxy中添加百度地图坐标拾取注意流程

作为开发的初学者，这东西仅仅作为个人备份，如果能帮到忙也也不错（我开发用的php，但这是js这本身没多大影响）

这里要说明几个问题：

1.boxy调用的页面中不能出现《script》标签不然不能显示

2.boxy调用的时候要注意流程，要先加载出boxy然后再去渲染地图到boxy页面中

3.百度地图的加载js应放在弹出boxy的那个页面中

注意流程：boxy页面其实为单独的一个页面只是用了ajax中$.get('/index.php?r=comm/map_coordinate', function(data){}方法来调用页面

关键触发js如下：


代码如下:

(function(){
$(document).ready(function() {

$("#Mechine_mec_points").click(function(){

__MC.Map_coordinate.getcorrdinate();

});
});

__MC.Map_coordinate = {
getcorrdinate:function(){

$.get('/index.php?r=comm/map_coordinate', function(data){ //调用boxy对应的页面，页面中就只有一个id=allmap的div

new Boxy(data,{ //在外面已经加载好百度地图AIP的js
'title':'地图坐标拾取',
'modal':true,
'draggable':false,
'unloadOnHide' : true,
'afterShow' : function(){

var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(106.566872, 29.536861), 17);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
function showInfo(e){
$("#Mechine_mec_points").val(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);

}//aftershow结束
});

return false;
});

},
}
})();

赞 (0)

相关推荐

  • 如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)

    以下是使用js代码实现百度地图计算两地距离,代码如下所示: <script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script> <script language="javascript" type="text/javascript" src="js/area.j

  • 百度地图自定义控件分享

    废话不多说了,直接奉上代码; 复制代码 代码如下: <script>         var map = new BMap.Map('allmap');         var Bcenter = new BMap.Point(116.404,39.915);         map.centerAndZoom(Bcenter,11);         //自定义控件         function staticControl(){             this.defaultAncho

  • 百度地图API应用之获取用户的具体位置

    百度地图API应用之获取用户的具体位置

    功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中. 主要是百度地图API的使用 复制代码 代码如下: var map = new BMap.Map("allmap"); //实例化一个地图对象var point = new BMap.Point(116.331398,39.897445); //设置地图中心的位置map.centerAndZoom(point,12); //设置地图元素的可视层 map.enableScro

  • PHP计算百度地图两个GPS坐标之间距离的方法

    本文实例讲述了PHP计算百度地图两个GPS坐标之间距离的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: /**  * 计算两个坐标之间的距离(米)  * @param float $fP1Lat 起点(纬度)  * @param float $fP1Lon 起点(经度)  * @param float $fP2Lat 终点(纬度)  * @param float $fP2Lon 终点(经度)  * @return int  */ function distanceBetw

  • 百度地图经纬度转换到腾讯地图/Google 对应的经纬度

    实现目的:将百度地图经纬度 转换到 腾讯地图/Google 对应的经纬度. 方法1:使用代码进行转换 存在的问题:转换之后误差大,基本不可用 public static void Convert_BD09_To_GCJ02(double lat, double lng) { double x_pi = Math. PI * 3000.0 / 180.0; double x = lng - 0.0065, y = lat - 0.006; double z = Math. sqrt(x * x +

  • js 调用百度地图api并在地图上进行打点添加标注

    js 调用百度地图api并在地图上进行打点添加标注

    最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图.并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息.右边是一些文字说明.本人刚开始学习,做的也不是很好 总体效果如下所示: 首先新建map.php文件,代码如下 复制代码 代码如下: <!DOCTYPE html> <?php /* 创建与数据库的连接 */ $conn=mysql_connect("","","") or die

  • 在jquery boxy中添加百度地图坐标拾取注意流程

    作为开发的初学者,这东西仅仅作为个人备份,如果能帮到忙也也不错(我开发用的php,但这是js这本身没多大影响) 这里要说明几个问题: 1.boxy调用的页面中不能出现<script>标签不然不能显示 2.boxy调用的时候要注意流程,要先加载出boxy然后再去渲染地图到boxy页面中 3.百度地图的加载js应放在弹出boxy的那个页面中 注意流程:boxy页面其实为单独的一个页面只是用了ajax中$.get('/index.php?r=comm/map_coordinate', functio

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • 微信JS-SDK坐标位置如何转换为百度地图坐标

    微信JS-SDK坐标位置如何转换为百度地图坐标

    微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流程讲解. 1.微信JS-SDK开发文档 首先进入官网的帮助文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 可对文档进行详细的研读,要获取位置信息,分以下步骤:

  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

  • vue项目中使用百度地图的方法

    vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • 如何在vue中使用百度地图添加自定义覆盖物（水波纹）

    如何在vue中使用百度地图添加自定义覆盖物（水波纹）

    简介 一如既往,我来给大家分享一个项目中遇到的比较有意思的需求并介绍一下相应的实现过程. 话不多说,直接上图: 具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物.实现的过程作者分为以下两点给大家介绍介绍. 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写自定义覆盖物的,那么首先我们来讨论一下水波纹动画的实现. 首先我们可以看到图中的覆盖物是由一个红心和水波紋组成,其中红心是固定不动的,那么我们可以直接这么写: <div class="

  • 如何在vue项目中使用百度地图API

    如何在vue项目中使用百度地图API

    目录 1.在百度地图开放平台注册账号并登录 2.选择自己所需的地图版本: 3.在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈) 4.之后就可以随处使用我们的百度地图了: 5.标记点的添加并拥有点击弹窗效果: 6.为坐标点添加文本标记: 1.在百度地图开放平台注册账号并登录 网址:http://lbsyun.baidu.com/index.php?title=jspopularGL 2.选择自己所需的地图版本: 我个人使用2.0

  • 详解在HTTPS 项目中使用百度地图 API

    百度地图 API 产品简介 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发. 百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用.接口使用无次数限制.在使用前,您需先申请密钥(ak)才可使用. 基础使用 引用百度地图 API, 将 "您的密匙" 替换为你在百度地

  • php实现计算百度地图坐标之间距离的方法

    本文实例讲述了php实现计算百度地图坐标之间距离的方法.分享给大家供大家参考,具体如下: 下面是网上的代码,使用的时候需要进行些许修改 第一个函数是获得范围,参数为纬度经度半径 第二个函数是计算坐标距离 <?php define('PI',3.1415926535898); define('EARTH_RADIUS',6378.137); //计算范围,可以做搜索用户 function GetRange($lat,$lon,$raidus){ //计算纬度 $degree = (24901 *

  • vue中调用百度地图获取经纬度的实现

    vue中调用百度地图获取经纬度的实现

    项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度 拖动小红标 获取经纬度 关键词 查询获取经纬度 前期准备 首先,我们需要取百度官方申请一个地图api秘钥,https://lbsyun.baidu.com/apiconsole/key 进入后在应用管理,我的应用去申请即可. 申请好以后,我们打开vue项目中public文件下的index.html文件,拼接百度AK值并引入 <script type=&quo

随机推荐