美文网首页
超越静态--用脚本的功能在GoogleMap上显示用户的地理位置

超越静态--用脚本的功能在GoogleMap上显示用户的地理位置

作者: 钎探穗 | 来源:发表于2016-05-13 15:20 被阅读39次
    <!doctype  html>
    <html>
    <head>
    <title>~~</title>
    
    <style>
     
    #map{width:100%; height:800px; }
    
    </style>
    
    <script src=”http://maps.google.com/maps/api/js?sensor=true”></script>  
     <!—JavaScript(一种程序设计语言)是由Netscape公司开发的一种脚本语言。JavaScript代码放在HTML标记`<script>`与`</script>`之间,脚本放在页面的head元素中,可以自行修改。
    JavaScript是区分大小写的,在JavaScript中引号是必须的,必须遵循严格的代码格式,而HTML往往忽略空格和代码格式。
    在获得任何嵌入的JavaScript代码之前,首先需要链接到外部的Google Maps API。-->
    
    </head>
    
    <body>
    
    <p>~~<P>
    
    <div id=”map”></div>
    
    <script>
     
    if(navigator.geolocation) {   
    <!--对象和属性之间通过点号进行分隔。如果浏览器支持geolocation ,就可以开始执行一些在地图上显示用户地理位置的基础工作-->
    
    var timeoutVal = 10*1000*1000;    
    <!--要定义一个变量,只须输入var关键字,后跟一个以单词形式表示的变量名即可-->
    
    navigator.geolocation.getCurrentPosition(
    
    displayPosition,
    
    displayError,
    
    {enableHighAccuracy:true,timeout:timeoutVal,maximumAge:0}
    );
    }
    
    else{
    alert(“~~~~”);
    }
    
    <!--如果浏览器支持geolocation ,则告诉浏览器运行displayPosition函数。displayPosition函数包含了实现在地图上显示用户地理位置的核心代码-->
    
    function displayPosition(position){    
    <!--函数(function)就是一组命令,要创建一个函数,只需输入function关键字,后跟函数名和一对圆括号,然后在函数名之下输入一对花括号,将函数中的命令放在花括号中。
    JavaScript中某些单词具有特殊含义,这些特殊单词就是JavaScript语言的保留字。若使用了任何一个保留字作为函数名或变量名,浏览该页面时就会产生错误。-->
    
    var pos=new google.maps.latLng(position.coords.latitude,position.coords.longitude);
    
    var options={
    
    zoom:10,
    
    center:pos,
    
    mapTypeId:google.maps.MapTypeId.ROADMAP
    
    };
    
    var map=new google.maps.Map(document.getElementById(“map”),options);
    
    var marker=new google.maps.Marker({
    
    position:pos,
    
    map:map,
    
    title:”~~”
    });
    }
    
    Function displayError(error){
    
    var errors={
    
    1:’~~’,
    
    2:’~~’,
    
    3:’~~’,
    
    };
    
    alert(“Error:”+errors[error.code]);
    
    }
    
    </script>
    
    </body>
    
    </html>
    
    
    <a href=”~~” onclick=”document.body.style.backgroundColor=’#333333’”;>~</a>
    //由于整个“对象-属性-值”字符串包含在一对双引号之中,因此将该属性值用一对单引号括起来,
    在a标记<a>中添加一个事件处理程序onclick;之后使用一个分号,以便标识放在HTML中的事件或命令的结束。
    

    • 新元素canvas可以直接在HTML页面中创建交互性,若不声明canvas元素的height和width属性,则默认的canvas是300像素宽,150像素高。

    shadowBlur:以像素为单位设置阴影的模糊量。


    API是应用程序编程接口(Application
    Programming Interface)的简写,它允许HTML与JavaScript之类的其他工具协同工作。

    相关文章

      网友评论

          本文标题:超越静态--用脚本的功能在GoogleMap上显示用户的地理位置

          本文链接:https://www.haomeiwen.com/subject/klqmrttx.html