码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2017-03-29 00:43:49      阅读:588      评论:0      收藏:0      [点我收藏+]

标签:alert   相关   eol   static   2.0   功能   zoom   border   utf-8   

<!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="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script>
    </head>
    <body style="margin:50px 10px;">
        <div id="status" style="text-align: center"></div>
        <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
    </body>
</html>

<script type="text/javascript">

    window.onload = function() {
        if(navigator.geolocation) {
            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
                // 百度地图API功能
                var map = new BMap.Map("container");
                var point = new BMap.Point(116.331398,39.897445);
                map.centerAndZoom(point,12);

                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);
                        alert(您的位置:+r.point.lng+,+r.point.lat);
                    }
                    else {
                        alert(failed+this.getStatus());
                    }        
                },{enableHighAccuracy: true})
        }
    };

</script>

转自:http://blog.csdn.net/goodnew/article/details/7318625

需要使用自己的AK,申请一个百度地图应用即可。

相关参考:

http://blog.csdn.net/zhang_shi_yu920/article/details/51469329

http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120149249044488/

http://blog.csdn.net/cyzero/article/details/42584193

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

标签:alert   相关   eol   static   2.0   功能   zoom   border   utf-8   

原文地址:http://www.cnblogs.com/itfantasy/p/6637737.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!