html5 地图 网格
2013-11-30 00:24:51 diaoguangqiang 阅读数 875

 

最近对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 为空或不是对象”(到目前也没有解决)。

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

2015-11-24 23:32:10 yao491314 阅读数 569
#一地图  
>  1. 测试浏览器是否支持-- navigator.geolocation    
>  2. 获取地理位置--getCurrentPosition(success,error,options)  
>  3. 成功获取信息后调用success函数,返回一个position对象position.coords.latitude--纬度;position.coords.longitude--经度。
  
#导入地图具体代码如下:
        <style>
                div{
                    height: 1000px;
                    width: 1000px;
                    margin:0 auto;
                }
            </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C8PCnCrYojLlb94TdQbiYB2O">
            </script>
        </head>
        <body>
            <div id="map">
                
            </div>
        </body>
        <script>
            function success(position){
                // alert(1);
                var la=position.coords.latitude;
                var lo=position.coords.longitude;
                alert(la + "  " + lo);
                var map = new BMap.Map("map");                        // 创建Map实例
                map.centerAndZoom(new BMap.Point(lo,la), 15);     // 初始化地图,设置中心点坐标和地图级别
                map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
                map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
                map.addControl(new BMap.OverviewMapControl());              //滚轮放大缩小
                map.addControl(new BMap.MapTypeControl());          //添加地图/添加缩略地图控件
                map.enableScrollWheelZoom();                            //启用类型控件
                map.setCurrentCity("成都");          // 设置地图显示的城市 此项是必须设置的
            }
            function error(errorCode){
                alert(errorCode.code + "   " + errorCode.message);
            }
            var options = {};
            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(success,error,options);
            }else{
                alert("您的浏览器不支持");
            }
        </script>
        </html>


#二画布
1. 定义一个画布--canvas

2. 判断浏览器是否支持canvas  

3. 获取画笔--var canvas = document.getElementById('first');var ctx        = canvas.getContext('2d');  

4.  context.fill()//填充  
5.  context.stroke()//绘制边框  
6.  context.fillStyle//填充的样式  
7.  context.strokeStyle//边框样式  
8.  cxt.fillRect(0,0,100,100)//画一个圆,参数分别为(0,0表示绘制的x轴和y轴);(100,100表示宽100,高100)
  
9.  cxt.arc(100,100,30,0,Math.PI*2,true);//画一个圆,参数100代表圆的中心点x坐标和y轴坐标,30代表圆的半径,0代表开始画圆的角度(0代表3点钟方向),Math.PI*2代表结束画圆的角度(Math.PI/180表示1度),true代表画圆的旋转方向为逆时针(false代表顺时针)。
 
10.  cxt.beginPath();//绘制起始路径(绘制图像较多相影响时需设置起始和闭合路径)

11.  cxt.closePath();//绘制闭合路径  
12.  cxt.lineWidth = 10;//绘制线条的宽度  
13.  绘制扇形:  
  
        ctx.beginPath();
        ctx.moveTo(200,150);
        ctx.arc(200,150,150,0,Math.PI/180*30,false);
        ctx.closePath()
        ctx.fill();
>14.ctx.createLinearGradient(0,0,0,170);(参数分别代表:渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 y 坐标)  
>15.  介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
 gradient.addColorStop("0","magenta");  
16.  ctx.scale(0.5,0.5);//画布缩放  
17.  ctx.save();---保持画布状态  
18.   ctx.restore();-----还原状态或者属性  
19.   context.rotate(angle);//旋转  
20.   context.translate(x,y)//平移  
21.   ctx.font="40px Arial";//设置字体(前一个参数代表字体大小,后一个代表字体样式)  
22.   context.fillText(text,x,y,maxWidth);
       text     规定在画布上输出的文本。
       x     开始绘制文本的 x 坐标位置(相对于画布)。
       y     开始绘制文本的 y 坐标位置(相对于画布)。  
23.  var img = new Image();
         img.src = 'oneeye.jpg';
         img.onload = function()
         {
             ctx.drawImage(img,0,0);//0表示    在画布上放置图像的x坐标位置。0表示    在画布上放置图像的 y 坐标位置。  
             ctx.beginPath();
         }
     }   
24. ctx.drawImage(img,10,10,30,30,50,50,100,100);  
        img    规定要使用的图像、画布或视频。
        sx    可选。开始剪切的 x 坐标位置。
        sy    可选。开始剪切的 y 坐标位置。
        swidth    可选。被剪切图像的宽度。
        sheight    可选。被剪切图像的高度。
        x    在画布上放置图像的 x 坐标位置。
        y    在画布上放置图像的 y 坐标位置。
        width    可选。要使用的图像的宽度。(伸展或缩小图像)
        height    可选。要使用的图像的高度。(伸展或缩小图像)



2011-06-17 16:20:00 xuing 阅读数 8566

 

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

于是选择了google Map API作为接口。然后地图的显示理所当然就应该是基于浏览器的,而现在大家使用的浏览器很多种多样,于是我选用了IE 8.0chrome 12opera 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

        };

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

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

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

 

2018-11-24 13:27:00 weixin_33738982 阅读数 44
2018-11-24 13:26:48 w1366352655 阅读数 298

基于HTML5/CSS3图片网格动画特效

阅读数 25

现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱。今天要分享的这款HTML5图片网格动画特效就非常炫酷。图片缩略图按网格的布局一行行排列,你只需点击按钮即可让这些图片出现不可思议的动画效果,值得一看。效果图如下:在线预览   源码下载实现的代码:&lt;divclass="grid"&gt;&lt;/div&gt;...

博文 来自: weixin_34416649

HTML5画布互动构建地图

阅读数 284

说明:悬停在部分建筑,看到它的描述body{margin:0px;padding:0px;}#container{background-color:black;background-image:url("http://www.html5canv

博文 来自: u013189806

html5的canvas绘制迷宫地图

阅读数 3232

canvas标签一直是html5的亮点,用它可以实现很多东西。我想用它来绘画像迷宫那样的地图。借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接)。如图:如果你想要画像这样的迷宫地图,如果不用canvas,可以通过dom操作拼接一个一个div,以达成这个效果。那样是不是很不合理?首先,页面上会存在大量的div,并且通过dom操作生成很耗性能,如果地图大了,会非常不流畅,非常

博文 来自: meimeizhuzhuhua

用HTML5画一个3D的三角形网格

阅读数 76

本文固定链接:http://www.verydemo.com/demo_c101_i57317.html本教程的主题是利用HTML5技术在2D和3D图形之间搭一座互通的桥梁(通过WebGL方式)。今天我将展示如何使用一个多边形网格绘制一个三维对象。一个多边形网格或非结构化网格是一个集合的顶点,边缘和面孔,在3d电脑图像和实体建模定义了一个多面体的对象的形状。通常由三角形的面孔,四边形或其...

博文 来自: iteye_19700

HTML5 Canvas实现Tiled地图编辑器

阅读数 4

HTML5Canvas实现Tiled地图编辑器运用Html5Canvas、FileAPI等实现的一个2D地图编辑器。概述GitHub:https://github.com/joinAero/WebTiledREADME.mdWebTiled========Web地图编辑器-------------...

博文 来自: weixin_34296641
没有更多推荐了,返回首页