用js调用google地图显示坐标

最新推荐文章于 2025-03-13 10:30:58 发布

对着阳光微笑

最新推荐文章于 2025-03-13 10:30:58 发布

阅读量5.7k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_35768238/article/details/79917148

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

关于google的API目前没有找到最新的，也不知道页面总显示无图像是为什么，但是代码是正确的，浏览器用IE是可以运行的，或者用没有拦截的浏览器也可以，仅供参考。

<!DOCTYPE html>
<head>
<title>调用谷歌地图</title>

<script src="http://ditu.google.cn/maps/api/js?v=3&sensor=false&language=en" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
function init(){
   if(navigator.geolocation){
     navigator.geolocation.getCurrentPosition(function (position){
     var coords=position.coords;
     console.log(position);
     var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
     var myOptions = {
                        zoom:14,                             //设定方法倍数
                        center:latlng,                       //将地图中心设定为指定的坐标点
                        mapTypeId:google.maps.MapTypeId.ROADMAP     //制定地图类型
                      };
     var map = new google.maps.Map(document.getElementById("map"),myOptions);

     var marker = new google.maps.Marker({
                                            position:latlng,          //将前面设定的坐标标出来
                                            map:map                   //将该标注设定在刚才创建的map中

                                          });

     var infoWindow = new google.maps.InfoWindow({
                 content:"当前位置：<br/>经度："+latlng.lat()+"<br/>纬度："+latlng.lng()
                                                 });

    infoWindow.open(map,marker);
   },


   function(error){
      switch(error.code){
         case 1:
         alert("位置服务被拒拒。");
         break;
         case 2:
         alert("暂时获取不到位置信息。");
         break;
         case 3:
         alert("获取信息超时。");
         break;
         default：
         alert("未知错误。");
         break;
       }
   });
   } else{
         alert("你的浏览器不支持HTML5来获取地理位置信息。");
   }
}
    
</script>
</head>
<body οnlοad="init()">

   <div id="map" style="width:800px; height:600px; border:1px solid red"></div>
    

</body>
</html>

调用google的API有两个能用，中文版的：

英文版的：<script src="http://ditu.google.cn/maps/api/js?v=3&sensor=false&language=en" type="text/javascript" charset="utf-8"></script>

效果图如下：