HTML5——地图应用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

我们就拿百度地图举例吧：

废话少说，直接上Demo

简要截图如下:'

简要代码如下:

<!DOCTYPE html>

<html>

<head>

<title>地图应用</title>

<meta charset="utf-8">

</head>

<body>

<input type="button" id="btn1" value="显示地理信息"/><br/>

<div id="dvShow" style="width:400px;height:400px;border:1px solid blue;"></div>

</body>

</html>

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

<script type="text/javascript">

 var oInput=document.getElementById("btn1");

 oInput.onclick=function(){

   navigator.geolocation.getCurrentPosition(function(position){//写一个成功的回掉函数

     //根据 “经纬度API” 获取位置

      var x=position.coords.longitude;//获取经度

      var y=position.coords.latitude;//获取纬度

     //根据 “百度API” 创建地图

      var map=new BMap.Map("dvShow");

      var pt=new BMap.Point(x,y);

      map.centerAndZoom(pt,14);

      map.enableScrollWheelZoom();//启动滚轮放大缩小,默认是禁止的

      var marker1=new BMap.Marker(pt);//创建标注

      map.addOverlay(marker1);

      //信息窗口展示

       var opts = {

      width : 250,     // 信息窗口宽度

      height: 100,     // 信息窗口高度

      title : "RYJ地图"  // 信息窗口标题

     }

     var infoWindow = new BMap.InfoWindow("这里是RYJ基地中心", opts);  // 创建信息窗口对象

     map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

	  //---------------------------------------------点击标注弹出信息窗口---------------------------------------------  

        marker1.addEventListener("click", function(e){

            this.openInfoWindow(infoWindow);

        });  

   });

 }

</script>