当前位置: 首页 > 编程笔记 >

如何在Google Maps中使用HTML5 GeoLocation API?

东门玺
2023-03-14
本文向大家介绍如何在Google Maps中使用HTML5 GeoLocation API?,包括了如何在Google Maps中使用HTML5 GeoLocation API?的使用技巧和注意事项,需要的朋友参考一下

HTML5 Geolocation API使您可以与自己喜欢的网站共享位置。Javascript可以捕获您的纬度和经度,并且可以发送到后端Web服务器,并可以进行精美的位置感知操作,例如查找本地商家或在映射上显示您的位置。地理位置坐标指定设备的地理位置。

我们将使用getCurrentPostion()方法来获取当前位置。要使用HTML5地理位置和Google Maps获取当前位置,您需要为Google Static Maps API设置API键。

转到https://console.developers.google.com并获得Google Map的免费API键。将此键添加到代码中以使用Geolocation。

您可以尝试使用HTML5地理位置和Google Maps来运行以下代码以显示当前位置-

示例

<!DOCTYPE HTML>
<html>
   <head>
      <script type = "text/javascript">
         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var latlongvalue = position.coords.latitude + ","
                              + position.coords.longitude;
            var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
                          +latlongvalue+"&zoom=14&size = 400x300&key =
                          AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";
            document.getElementById("mapholder").innerHTML =
            "<img src ='"+img_url+"'>";
         }
         function errorHandler(err) {
            if(err.code == 1) {
               alert("Error: Access is denied!");
            }else if( err.code == 2) {
               alert("Error: Position is unavailable!");
            }
         }
         function getLocation(){
            if(navigator.geolocation){
               //超时为60000毫秒(60秒)
               var options = {timeout:60000};
               navigator.geolocation.getCurrentPosition
               (showLocation, errorHandler, options);
            }else{
               alert("Sorry, browser does not support geolocation!");
            }
         }
      </script>
   </head>
   <body>
      <div id="mapholder"></div>
      <form>
         <input type="button" onclick="getLocation();" value="Your Location"/>
      </form>
   </body>
</html>
 类似资料:
  • 我必须使用google places api实现餐厅定位服务,如下所示: https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=43.7666321,11.2546258 但结果与使用谷歌地图进行的近距离搜索大不相同: https://www.google.it/maps/search/Ristoranti/@4

  • Flask Google Maps Easy to use Google Maps in your Flask application requires Jinja Flask A google api key get here Contribute To contribute with the project, clone it, create a virtualenv and install

  • 问题内容: 我只是学习有关显示地图的android编程。但是当我运行这段代码时,出现了一些错误。谁能解释为什么会发生此错误?我该如何解决这个问题?非常感谢你。 堆栈跟踪: MainActivity.java 布局 表现 问题答案: 在您的xml文件中,将其更改 为 将您的活动扩展到FragmentActivty并进行更改 还要检查 希望这可以帮助。

  • 问题内容: 我想使用Android Studio使用Gradle构建工具开发应用程序。我无法在上插入存储库和库。我的文件如下: 如何在项目中添加OpenCV? 问题答案: 您可以在Android Studio中轻松完成此操作。 请按照以下步骤将Open CV作为库添加到您的项目中。 libraries在项目主目录下创建一个文件夹。例如,如果您的项目是OpenCVExamples,则将创建一个Ope

  • 我想使用Android Studio开发一个应用程序使用Gradle构建工具。我无法在上插入OpenCV repo和库。我的文件如下所示: 我如何在我的项目中添加OpenCV?

  • 我有一个谷歌地图,它使用一个融合表层来动态设置大量多边形的样式。在这一层的顶部,我还在多边形本身的特定板条位置生成一组标记。我希望有以下行为: 当您单击多边形上的任何位置时,将弹出一个infoWindow,由融合表中的数据填充。这是工作。 当您单击标记时,它应该将单击事件传递到融合表层,并创建与标记的LatLng处发生自然单击相同的弹出窗口。这就是我正在努力的,目前还没有成功。我在每个标记上添加一

  • 问题内容: 我想利用Google Maps OnlocationChangeListener,但是因为我已经实现了 并且由于需要保持上述实现,这使得实现OnlocationChangeListener非常困难。目前,代码也进行了 扩展,而我当前的代码又产生了更多问题。 问题是: 由于已经实现和扩展,我无法扩展或实现任何其他功能。这意味着我无法让OnlocationChangeListener工作

  • 问题内容: 我想对英语句子加标签,并进行一些处理。我想使用openNLP。我已经安装了 当我执行命令时 它提供输出POSTagging Text.txt中的输入 我希望它安装正确吗? 现在如何从Java应用程序内部进行此POStagging?我已将openNLPtools,jwnl,maxent jar添加到项目中,但是如何调用POStagging? 问题答案: 这是我放在一起的一些(旧)示例代码