初试HTML5地图显示

来源：互联网发布：知乎高跟鞋推荐编辑：程序博客网时间：2024/05/17 22:16

最近对HTML5发生了兴趣。因为以前就是做导航监控的，对地图这块也懂一点。所以在学习的过程中希望将地图元素融入HTML5中。也当是自己给自己的练习。

于是选择了google Map API作为接口。然后地图的显示理所当然就应该是基于浏览器的，而现在大家使用的浏览器很多种多样，于是我选用了IE 8.0，chrome 12，opera 11作为测试对象。

根据找到的资料，建立了一个html5文件，源码如下：

<!DOCTYPE html>

<title>testmap</title>

function datainit()

{

navigator.geolocation.getCurrentPosition(function(position){

varcoords=position.coords;

//设定地图参数，将用户的当前位置的纬度、经度设定为地图的中心点

varlatlng=newgoogle.maps.LatLng(coords.latitude,coords.longitude);

varmyOptions={

zoom:14,

center:latlng,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

//创建地图并在“map“div中进行显示

varmap1;

map1=new google.maps.Map(document.getElementById("map"),myOptions);

//地图上创建标记

varmarker=new google.maps.Marker({

position:latlng,

map:map1

});

//设定标注窗口，并指定该窗口中的注释文字

varinfowindow=new google.maps.InfoWindow({

content:"当前位置！"

});

//打开标注窗口

infowindow.open(map1,marker);

});

}

</script>

</header>

</body>

以上源码在Opera中运行正常，我能够看到想要的地图。但是在IE和Chrome中都不能正常运行，提示找不到datainit（）这个对象。感觉挺奇怪的，以前也没碰到类似的情况啊。抱着侥幸的心理把datainit()函数搬到一个.js的文件中，竟然奇迹般的能在chrome浏览器中显示地图了（到现在还不是太明白，有谁了解的请指点一二），但在IE里还是不行，这时候在IE里报的错误是“navigator.geolocation 为空或不是对象”（到目前也没有解决）。

总结一下，跨平台，多浏览器的开发确实困难。需要考虑的东西太多了。