html5腾讯地图api应用

第一次写博客，之后的学习也会通过这种方式巩固。

最近在学JavaScript和HTML5，所以近期的内容皆是关于这些知识的。

1.HTML5支持地理定位，可以获取用户的经纬度信息。

在js中可以使用position.coords对象获取经纬度

window.onload = getMyLocation;   //在网页dom加载完毕之后调用getmylocation方法
var map;

function getMyLocation(){
 if(navigator.geolocation){        //navigator.geolocation是html5内置对象的属性，有值就代表浏览器支持地理定位
  navigator.geolocation.getCurrentPosition(displayLocation,displayError);//getcurrentposition方法有三个参数，1个是获得定位信息成功后的函数（此处为displaylocation），1个是失败后调用的函数（此处为displayerror），1个是用来控制地理定位如何计算他的值的（此处省略，没有设置）
 }else{
  alert("oops,no geolocation support")
 }
}

function displayLocation(position){    //获取定位信息成功后调用的函数
 var latitude = position.coords.latitude;   //position.coords对象中有latitude和longitude俩属性分别表示经纬度
 var longitude = position.coords.longitude;
 var div = document.getElementById("location");
 div.innerHTML = "latitude:"+latitude+"longtitude:"+longitude;//将经纬度显示在页面中
 if(map == null){
  showMap(position.coords);
 }
}

在使用腾讯地图之前需要在腾讯地图官网申请key，方法参考官网

并在html页面中插入<script src="http://map.qq.com/api/js?v=2.exp&key=在官网申请的key值"></script>

function showMap(coords){   //将腾讯地图展示在页面中
 var qqLatAndLong = new qq.maps.LatLng(coords.latitude,coords.longitude); //地图上显示的中心点
 var mapOptions={ //新建地图时需要传入的参数，用来设置地图的
  zoom:10,  //地图放大的级别
  center:qqLatAndLong,//地图显示中心的经纬度
  mapTypeId:qq.maps.MapTypeId.ROADMAP//地图种类，参考官网开发文档
 };
 var mapDiv = document.getElementById("map");//获取html中用来盛放地图的div容器
 map = new qq.maps.Map(mapDiv,mapOptions);//创建地图
 
}

地图过大，可以在放地图的div中添加样式修改height和width的值，使地图显示的大小合适

 

这是读《head first html5 programming》学到的，有疑问可以回复交流