微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt3GBeFuzNIG9OlnOZ3u4A5H3WcSe5"> </script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
//百度地图
var currentLat="",currentLon="";
var query="酒店";
function getBaiduMap(){
//百度地图API功能 定位
if(navigator.geolocation ){
navigator.geolocation.getCurrentPosition(translatePoint,locationError); //通过手机的webKit定位(目前ios系统对非https网站不提供支持),所以在locationError()中使用BMap.Geolocation()
}
else{
tipDialog.show(tip_fail,'温馨提示','浏览器不支持html5来获取地理位置信息');
}
}
function locationError(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus()== BMAP_STATUS_SUCCESS){
currentLat = r.point.lat;
currentLon = r.point.lng;
var gpsPoint = new BMap.Point(currentLon, currentLat);
BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标
}
});
}
var map= new BMap.Map("allmap");
//转换坐标
function translatePoint(position){
currentLat = position.coords.latitude;
currentLon = position.coords.longitude;
var gpsPoint = new BMap.Point(currentLon, currentLat);
BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标
}
function initMap(point){
//初始化地图
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableContinuousZoom();
map.enableInertialDragging();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.setDefaultCursor("crosshair");
map.centerAndZoom(point, 20);
var marker1=new BMap.Marker(point);
var label = new BMap.Label('当前位置', { offset: new BMap.Size(25, 0) });
label.setStyles({
border: "solid 1px #00f",
color: "#00f",
padding: "0 5px"
});
marker1.setLabel(label); //这里是添加一个文字 ,显示在标注的右边
map.addOverlay(marker1) ;
getPonint(currentLon,currentLat,query);
}
var marker="";
//获取百度地图的坐标点
function getPonint(currentLon, currentLat,query){
var currenponit=currentLat+","+currentLon;
//var currenponit="31.973505,118.746815";
var url="http://api.map.baidu.com/place/v2/search?query="+query+"&location="+currenponit+"&radius=20000&output=json&ak=yGQt3GBeFuzNIG9OlnOZ3u4A5H3WcSe5&callback=?";
//var UR2="http://api.map.baidu.com/place/v2/search?query=%E5%81%9C%E8%BD%A6%E5%9C%BA&location=31.973505,118.746815&radius=200000000&output=json&ak=yGQt3GBeFuzNIG9OlnOZ3u4A5H3WcSe5&callback=?"
$.getJSON(url,function(data){
if(data.status==0){
if(marker!=""){
map.clearOverlays();//清除标记点
var gpsPoint = new BMap.Point(currentLon, currentLat);
var marker1=new BMap.Marker(gpsPoint);
map.centerAndZoom(gpsPoint, 20);
var label = new BMap.Label('当前位置', { offset: new BMap.Size(25, 0) });
label.setStyles({
border: "solid 1px #00f",
color: "#00f",
padding: "0 5px"
});
marker1.setLabel(label); //这里是添加一个文字 ,显示在标注的右边
map.addOverlay(marker1) ;
}
$.each(data.results,function(index,item){
var p0=item.location.lat;
var p1=item.location.lng;
var point = new BMap.Point(p1, p0); //循环生成新的地图点
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
});
// 将google地图中的经纬度转化为百度地图的经纬度
BMap.Convertor.translate(point, 2, function(point){
marker = new BMap.Marker(point);
marker.setIcon(myIcon);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
var info='<p style=’font-size:12px;lineheight:1.8em;’>'+item.name+'</br>地址:'+item.address;
if(item.telephone!="" &&item.telephone!=undefined){
info+='</br> 电话:'+item.telephone;
}
info+='</br></p>';
marker.addEventListener("click",function(){
map.openInfoWindow(new BMap.InfoWindow(info),point); //开启信息窗口
});
});
});
}
else{
tipDialog.show(tip_fail,'温馨提示',data.message);
}
});
}
微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题的更多相关文章
- H5页面,百度地图点击事件
需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现 这样子虽然在浏览器的手机模拟器下是没有问题的 但是放在机器上测试的 ...
- 微信h5页面下拉露出网页来源的解决办法
微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', functio ...
- 领导让我重新做一个微信H5页面!
leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...
- 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- 网页中嵌入百度地图报错:The request has been blocked,the content must served over Https
网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...
- pc网页中嵌入百度地图
pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...
- 微信h5页面调用第三方位置导航
微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考 ...
- C# 程序中嵌入百度地图
本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...
随机推荐
- 创业维艰-->>书摘+乱七八糟
我把我的思路告诉了比尔:在不破产的情况下, 退出云计算服务的唯一办法是提高销售额, 因为即“即使我们将所有员工全部辞掉,如果销售额无法实现大幅增长的话, 基础设施成本依然会把我们逼上绝路.我进一步解释 ...
- DATEADD日期函数的使用
在当前日期加上几天:https://www.cnblogs.com/shitaotao/p/7648198.html 计算本月的第一天:https://www.cnblogs.com/lcyuhe/p ...
- kafka7 探索生产者同步or异步发送消息
1.生产者:在发送完消息后,收到回执确认. 主要是在SimpleProducer.java中修改了发送消息的2行代码,用到了回调函数,修改如下: //发送消息 ProducerRecord<St ...
- python基础之 面向对象
1.什么是面向对象? 在大学学习c#的时候接触面向对象,知道好像有什么方法,属性,人狗大战啥的.但是都忘记了,也不知道面向对象到底是个啥! 在python中一切都是对象,linux中一切都是文件(突然 ...
- 6条 Tips 为你照亮 GitHub 寻宝之路
找房子.找保姆.找装修......在Github是不行的,但是:找Demo,找构架,找工具,找资源......就上Github!Github,啥都有.今天跟大家分享几条快速在Github找到想要的资源 ...
- 文件上传下下载(不包含断点续传) Excel,Word导入导出基础
1.文件上传下载(MVC应用) 视图:form表单,编码方式为multipart/form-data <body> <div> <form action="/D ...
- 深入理解Java虚拟机1-chap1-2-斗之气8段
1.HotSpot VM:热点代码探测能力,与JIT技术共同进行编译优化,输出高质量代码 2.运行时数据区域 程序计数器:控制程序执行顺序,无OOM Java虚拟机栈:生命周期与线程一致,描述Java ...
- 监听器&上传下载&I18N
监听器(Listener) 监听Java对象 的方法调用和属性改变() web的一个组件 事件驱动编程:事件源,事件名称,事件响应函数,事件对象 以后在Spring中的配置 WEB中有哪些监听器? ...
- fiddler学习总结--利用fiddler快速模拟mock
Mock的应用就是在测试接口的时候,去模拟我们想要的接口 1.创建一个txt文件,里面随意写一个json字符串,如图所示: 2.选择目标消息,并且点击“autoresponde”-->“add ...
- centos7安装zabbix3.0超详细步骤解析
centos7安装zabbix3.0超详细步骤解析 很详细,感谢作者 以下是我操作的history 622 java -version 623 javac -version 624 grep SELI ...