html5学习(地理位置定位)

心已赠人 2022-12-31 07:21 150阅读 0赞

> **我把代码部署到我本地的tomcat，然后用我笔记本电脑的火狐和IE测试了一下，都是报错，没办法测试！**
> 
> **html5地理位置定位，测试比较困难和麻烦，最好把代码部署到服务器上进行测试，而且协议还要是https，http协议估计还没法测试，估计会报错。**
> 
> **代码部署到服务器上之后，最好是用手机去访问，手机比较好测试，你抱一台笔记本电脑测试也不太实际！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

> **我把代码部署到我本地的tomcat，然后用我笔记本电脑的火狐和IE测试了一下，都是报错，没办法测试！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>html5学习(地理位置定位)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>html5学习(地理位置定位)</h3>
    <div id="showLocation" style="height: 200px;">
    <font style="font-size: 25px;">您的地理位置信息如下：</font>
    </div>
    </body>
    <script type="text/javascript">
    function $(elementId) {
    	return document.getElementById(elementId);
    }
    
    if (navigator.geolocation) {
    	navigator.geolocation.watchPosition(success, error, options);
    // 	navigator.geolocation.watchPosition(showPosition, error, options);
    // 	navigator.geolocation.getCurrentPosition(success);
    // 	navigator.geolocation.getCurrentPosition(showPosition);
    } else {
    	alert("该浏览器不支持获取地理位置");
    }
    
    function success(position) {
    	var divNode = $("showLocation");
    	divNode.innerHTML = "<br />纬度:" + position.coords.latitude + "<br />经度:"
    				+ position.coords.longitude;
    	}
    
    function error(err) {
    	alert(err.code + "-----" + err.message);
    }
    
    var options = {};
    
    function showPosition(position) {
    	var latlon = position.coords.latitude + "," + position.coords.longitude;
    	var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    			+ latlon + "&zoom=14&size=400x300&sensor=false";
    	document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
    }
    </script>
    </html>

完！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221120/53f4c5ccb1a74f95b1f9ae3c46a2b4e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201228231305109.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201228231352751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201228231647324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201228231509500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70