<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网站不提供支持问题的更多相关文章

  1. H5页面,百度地图点击事件

    需求:用户点击地图的时候获取地址街道,编码等详细信息. 然后看百度API文档,看到了click事件,关键时候还是需要看文档的. 实现 这样子虽然在浏览器的手机模拟器下是没有问题的 但是放在机器上测试的 ...

  2. 微信h5页面下拉露出网页来源的解决办法

    微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', functio ...

  3. 领导让我重新做一个微信H5页面!

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  4. 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...

  5. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  6. 网页中嵌入百度地图报错:The request has been blocked,the content must served over Https

    网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...

  7. pc网页中嵌入百度地图

    pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...

  8. 微信h5页面调用第三方位置导航

    微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考 ...

  9. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

随机推荐

  1. 地图标绘系统V1.0测试版【申明:来源于网络】

    地图标绘系统V1.0测试版[申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/39718085

  2. consul服务配置维护

    1.命令参数 -advertise:通知展现地址用来改变我们给集群中的其他节点展现的地址,默认情况下-bind地址就是展现地址,然而也存在一些路由地址是不能受约束的,这时候会激活一个不同的地址来供应, ...

  3. join算法分析

    对于单条语句,explain看下key,加个索引 多个条件,加复合索引 where a = ? order by b 加(a,b)的复合索引 上面都是比较基本的,这篇我们分析一些复杂的情况--join ...

  4. nessus无法访问https://localhost:8834/#/,解决方法。

    之前没弄明白为啥经常访问不了https://localhost:8834/#/,后面才发现是服务关闭了. 首先netstat -an 查看8834是否开启, 直接运行一下nessus目录下的nessu ...

  5. shell编程之awk命令详解

    shell编程之awk命令详解 a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; out ...

  6. 5.0-uC/OS-III时间管理

    1.时间管理 uC/OS-III为用户提供了与时间管理相关的服务. 在uC/OS-III中设置了能提供时基中断的中断源.该中断源提供 10Hz 到 1000Hz 之间的中断(需设置OS_CFG_APP ...

  7. Software Testing 1 —— 有关编程错误的经历

    最令我印象深刻的程序错误几乎都是那些细节,具体的记不清了,因为真的很细.他们不会报正常的错,要么是时而可以正常运行,时而不能正常运行但是没有报错,比如闪退或者持续运行没有输出:要么是报的错误意义很宽泛 ...

  8. Vue系列之 => computed实现求值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. Java 多重catch语句的具体使用介绍

    某些情况,由单个代码段可能引起多个异常.处理这种情况,你可以定义两个或更多的catch子句,每个子句捕获一种类型的异常.当异常被引发时,每一个catch子句被依次检查,第一个匹配异常类型的子句执行.当 ...

  10. git常用操作记录

    之前的多人项目大多使用了SVN作为版本控制,自己只会用eclipse连接GitHub的操作.这次项目采用了git作为版本控制系统,所以学会了很多新操作,这里权当记录,以备后用. git的一些基本操作可 ...