最近对HTML5发生了兴趣。因为以前就是做导航监控的,对地图这块也懂一点。所以在学习的过程中希望将地图元素融入HTML5中。也当是自己给自己的练习。
于是选择了google Map API作为接口。然后地图的显示理所当然就应该是基于浏览器的,而现在大家使用的浏览器很多种多样,于是我选用了IE 8.0,chrome 12,opera 11作为测试对象。
根据找到的资料,建立了一个html5文件,源码如下:
<!DOCTYPE html>
<header>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>testmap</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" />
<script type="text/javascript">
function datainit()
{
navigator.geolocation.getCurrentPosition(function(position){
var coords=position.coords;
//设定地图参数,将用户的当前位置的纬度、经度设定为地图的中心点
var latlng=new google.maps.LatLng(coords.latitude,coords.longitude);
var myOptions={
zoom:14,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//创建地图并在“map“div中进行显示
var map1;
map1=new google.maps.Map(document.getElementById("map"),myOptions);
//地图上创建标记
var marker=new google.maps.Marker({
position:latlng,
map:map1
});
//设定标注窗口,并指定该窗口中的注释文字
var infowindow=new google.maps.InfoWindow({
content:"当前位置!"
});
//打开标注窗口
infowindow.open(map1,marker);
});
}
</script>
</header>
<body onload = "datainit();">
<div id="map" style="width:400px; height:400px"></div>
</body>
以上源码在Opera中运行正常,我能够看到想要的地图。但是在IE和Chrome中都不能正常运行,提示找不到datainit()这个对象。感觉挺奇怪的,以前也没碰到类似的情况啊。抱着侥幸的心理把datainit()函数搬到一个.js的文件中,竟然奇迹般的能在chrome浏览器中显示地图了(到现在还不是太明白,有谁了解的请指点一二),但在IE里还是不行,这时候在IE里报的错误是“navigator.geolocation 为空或不是对象”(到目前也没有解决)。
总结一下,跨平台,多浏览器的开发确实困难。需要考虑的东西太多了。