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

HTML5结合百度地图API创建地图应用

时间:2015-06-25 00:00:37      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:

具体的百度地图API的使用方法查看百度地图API里的DEMO

<style>
    #div1{ width:400px; height:400px; border:1px #000 solid;}
</style>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
<script>
window.onload = function(){
    var oInput = document.getElementById(input1);
    
    oInput.onclick = function(){
        
        navigator.geolocation.getCurrentPosition(function(position){
            
            //获取经度和纬度
            var y = position.coords.longitude;
            var x = position.coords.latitude;
            
            var map = new BMap.Map("div1");//创建地图对象
            
            var pt = new BMap.Point(y, x);//将经度和纬度传进来
            
            map.centerAndZoom(pt, 14);  //地图缩放层级
            map.enableScrollWheelZoom();  //鼠标滚轮放大缩小    
            var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));
            var marker2 = new BMap.Marker(pt,{icon:myIcon});      // 创建标注
            map.addOverlay(marker2); 
            
            var opts = {
              width : 200,     // 信息窗口宽度
              height: 60,     // 信息窗口高度
              title : "妙味课堂"  // 信息窗口标题
            }
            var infoWindow = new BMap.InfoWindow("IT培训机构", opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow,pt); //开启信息窗口
        });
    };
};
</script>
</head>
<body>
    <input type="button" value="请求" id="input1" />
    <div id="div1"></div>
</body>

 

HTML5结合百度地图API创建地图应用

标签:

原文地址:http://www.cnblogs.com/LO-ME/p/4598851.html

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