微信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 ...
随机推荐
- [daily][device][archlinux][trackpoint] 修改指点杆速度/敏捷度
修改指点杆速度,敏捷度: [root@T7 ~]# echo > /sys/devices/platform/i8042/serio1/serio2/sensitivity [root@T7 ~ ...
- windows7,python3使用time.strftime()函数报ValueError: embedded null byte
windows7环境下,执行代码报ValueError: embedded null byte时,在原代码前面加一行代码:locale.setlocale(locale.LC_ALL,'en')即可解 ...
- ES6 字符串
拓展的方法 子串的识别 ES6 之前判断字符串是否包含子串,用 indexOf 方法,ES6 新增了子串的识别方法. includes():返回布尔值,判断是否找到参数字符串. startsWith( ...
- git忽略规则.gitignore未生效解决办法
创建git本地的仓库常用命令:git init #初始化--------生成.git文件 配置本地用户名跟邮箱(这样就知道是谁提交的东西)git config --global user.name [ ...
- java框架之Hibernate(4)-几种检索方式
准备 模型及映射文件 package com.zze.bean; import java.util.HashSet; import java.util.Set; public class Class ...
- python框架之Django(12)-认证系统之auth模块
我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Django作为一个完美主义者的终极框 ...
- linux 单次定时任务
使用at =======查看当前任务========= at -l 或者atq =======查看任务执行什么===== at -c =======配置任务========= at 02:00 ...
- asp.net重要小知识
1.服务端用request获取值一般用的是name属性,而ID属性是获取不到值的.对于asp.net中服务器控件一般是把name属性封装的名字和ID相同.
- Eclipse出现:An internal error occurred during: "Retrieving archetypes:". GC overhead limit exceeded的问题解决
网上说修改虚拟内存的方式,其实不太可行,最直接的方式就是删除以前的workspace,重新使用一个新的workspace.
- 从Win32程序中的主函数中获取命令行参数
在标准C或者Win32控制台程序的main函数中,它们都有两个参数:"argc" 和 "argv",如下所示: int main(int argc, char ...