geolocation定位

# geolocation定位

pc端通过ip地址来大致定位，移动端可以调用硬件来更精确定位
geolocation在navigator下，调用getCurrentPosition来处理位置
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style >
    .bmap {width:600px; height:400px; border:1px solid black}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script>
    window.onload=function (){
      var oBtn=document.getElementById('btn1');

      oBtn.onclick=function (){
        //getCurrentPosition(成功, 失败, 参数)
        navigator.geolocation.getCurrentPosition(function (res){

          console.log(res.coords);
          alert('成功');

          //创建和初始化地图函数：
          function initMap(){
            createMap();//创建地图
            setMapEvent();//设置地图事件
            addMapControl();//向地图添加控件
            addMapOverlay();//向地图添加覆盖物
          }
          function createMap(){
            map = new BMap.Map("bmap");
            map.centerAndZoom(new BMap.Point(res.coords.longitude,res.coords.latitude),15);
          }
          function setMapEvent(){
            map.enableScrollWheelZoom();
            map.enableKeyboard();
            map.enableDragging();
            map.enableDoubleClickZoom()
          }
          function addClickHandler(target,window){
            target.addEventListener("click",function(){
              target.openInfoWindow(window);
            });
          }
          function addMapOverlay(){
            var markers = [
              {
				  content:"来找我啊",title:"我的位置",imageOffset: {width:0,height:3},
				  position:{lat:res.coords.latitude,lng:res.coords.longitude}
			  }
            ];
            for(var index = 0; index < markers.length; index++ ){
              var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
              var marker = new BMap.Marker(point,
			  {
				icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",
				new BMap.Size(20,25),
				{
                imageOffset: new BMap.Size(
					markers[index].imageOffset.width,markers[index].imageOffset.height
				)
              })});
              var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
              var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
              };
              var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
              marker.setLabel(label);
              addClickHandler(marker,infoWindow);
              map.addOverlay(marker);
            };
          }
          //向地图添加控件
          function addMapControl(){
            var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
            scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
            map.addControl(scaleControl);
            var navControl = new BMap.NavigationControl(
				{anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}
			);
            map.addControl(navControl);
            var overviewControl = new BMap.OverviewMapControl(
				{anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true}
			);
            map.addControl(overviewControl);
          }
          var map;
            initMap();
        }, function (err){
          alert('失败');
        });
      };
    };
    </script>
  </head>
  <body>
    <input type="button" value="定位" id="btn1">
    <div class="bmap" id="bmap">

    </div>
  </body>
</html>
← 静态界面的相关总结 web Worker →