HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地(转)

HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地 
我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前位置后,页面中定好目的地,这样打开页面后直接进入导航页面 
可以省下先发送位置信息后,点确定再出导航,省一步,

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wDYEcxgRRheZwyC9jpN1Tt7fzr2zjosZ"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jQuery-->  

    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>   

</head>  

<body>
   <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">    

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.709684,39.89778);
    map.centerAndZoom(point, 16);
    map.enableScrollWheelZoom();   

    var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{
        anchor: new BMap.Size(10,10)
    });  

    var marker=new BMap.Marker(point,{icon: myIcon});
    map.addOverlay(marker);    

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            //map.panTo(r.point);//地图中心点移到当前位置
            var latCurrent = r.point.lat;
            var lngCurrent = r.point.lng;
            //alert(‘我的位置:‘+ latCurrent + ‘,‘ + lngCurrent);  

            location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination=39.89778,116.709684&mode=driving&region=北京&output=html";  

        }
        else {
            alert(‘failed‘+this.getStatus());
        }
    },{enableHighAccuracy: true})  

    map.addOverlay(marker);
    var licontent="<b>健龙森羽毛球馆</b><br>";
        licontent+="<span><strong>地址:</strong>北京市通州区滨河中路108号</span><br>";
        licontent+="<span><strong>电话:</strong>(010)81556565 / 6969</span><br>";
    var opts = {
        width : 200,
        height: 80,
    };
    var  infoWindow = new BMap.InfoWindow(licontent, opts);
    marker.openInfoWindow(infoWindow);
    marker.addEventListener(‘click‘,function(){
        marker.openInfoWindow(infoWindow);
    });    

</script>

  

时间: 2024-12-28 10:16:04

HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地(转)的相关文章

HTML5 利用百度地图API获取当前位置

由于项目需要定位到城市,研究了地理定位,做了一些手记,和大家分享一下~ 项目的开发需求是获取到当前用户的位置,然后为用户提供一些服务. 此时可以采用两种定位方式,一种是用GPS的定位,然后将定位到的经纬度传递到百度地图的API接口当中.另一种方法是利用百度API接口,使用IP地址定位,然后使用IP地址获取到的经纬度,传递到百度地图API接口中. 自己尝试使用了这两种方式进行定位.相对来说,IP地址定位,偏差比较大.GPS定位虽然还可以,但是也不足够精确.产生比较大偏差的原因有可能是以下几点造成的

利用百度地图API获取当前位置信息

利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: 1 <script type="text/javascript"> 2 var map; 3 var gpsPoint; 4 var baiduPoint; 5 var gpsAddress; 6 var baiduAddress; 7 var x; 8 var y; 9 function getLocation() { 10 //根据IP获取城市 1

html5移动端根据百度地图api获取详细地址

<script type="text/javascript" src="js/BMap.js" ></script> <script type="text/javascript"> // 扩展API是否准备好,如果没有则监听"plusready"事件 if(window.plus){ plusReady(); }else{ document.addEventListener( "p

使用html5 地理位置技术 和 百度地图api查询当前位置

使用了  zepto  和 requirejs define(['zepto'],function($){ var geolocation = { init:function(config,onSuccess,onError){ if(typeof(config)=='function'){ onError = onSuccess; onSuccess = config; config = undefined; } if(Object(config)===config){ for(var k i

HTML5调用百度地图API进行地理定位实例

自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例.请看下面代码: <!DOCTYPE html> <html> <title>HTML5调用百度地图API进行地理定位实例</title> <head> <meta http-equiv="Content-Type&

HTML5 调用百度地图API地理定位

<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="ht

HTML5地理定位,百度地图API,知识点熟悉

判断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) { alert('支持地理定位'); } else { alert('不支持地理定位'); } 获取自己位置经纬度 <script> var x=document.getElementById("wrap"); function getLocation () { if (navigator.geolocation) { navigator

C#调用百度地图API入门&amp;解决BMap未定义问题

本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于Android的百度地图,其实原理都差不多,希望文章对你有所帮助吧! 一. C#显示百度地图 使用C# Winform显示百度地图主要包括两个步骤: 1.调用百度地图API,通过申请的密钥AK访问JavaScript版本地图: 2.再在C#中webBrowser浏览器控件中访问JS文件,显示地图到窗口.

根据百度地图API获取指定地点的经纬度

做项目时,遇到对地点获取地图中对应的经纬度,作一下笔记,以备以后直接使用 package com.hpzx.data; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.UnsupportedEncodingException; import java.net.MalformedURLException; import java.n