微信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 ...
随机推荐
- PAT甲级1080 Graduate Admission【模拟】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805387268571136 题意: 模拟高考志愿录取. 考生根据总 ...
- Luogu 1086 - 花生采摘 - [简单模拟]
题目链接:https://www.luogu.org/problemnew/show/P1086 题目描述鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着 ...
- POJ 2187 - Beauty Contest - [凸包+旋转卡壳法][凸包的直径]
题目链接:http://poj.org/problem?id=2187 Time Limit: 3000MS Memory Limit: 65536K Description Bessie, Farm ...
- 查看Sql Server 数据库的内存使用情况
-- 查询SqlServer总体的内存使用情况 select type , sum(virtual_memory_reserved_kb) VM_Reserved , sum(virtual_memo ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- 基于Spark Streaming + Canal + Kafka对Mysql增量数据实时进行监测分析
Spark Streaming可以用于实时流项目的开发,实时流项目的数据源除了可以来源于日志.文件.网络端口等,常常也有这种需求,那就是实时分析处理MySQL中的增量数据.面对这种需求当然我们可以通过 ...
- 【Java】NO.80.Note.1.Java.1.001-【Java 各种特性概念】
1.0.0 Summary Tittle:[Java]NO.80.Note.1.Java.1.001-[Java 各种特性概念] Style:Java Series:Java Since:2018-0 ...
- rpm 包的安装、卸载、升级、查询、验证
关键字: rpm 强制卸载jdk rpm -e j2sdk1.4.2_04 强制覆盖安装jdk rpm -Uvh j2sdk-1_4_1_02-fcs-linux-i586.rpm --force - ...
- 解决bootstrap 模态框 数据清除 验证清空
$("#switchModel").on("hidden.bs.modal", function () { $('#ware-form')[0].reset() ...
- Cycle (KMP + hash)
题意:给你2个串,让你判断2个字符串的前缀是否满足首尾连接形成的环是不是一样的. 思路:我们需要提前知道的是满足条件的前缀一定满足 strA = str1 + str2, strB = str2 + ...