Google Maps API Hello World示例

最新推荐文章于 2024-07-23 11:32:13 发布

cyan20115

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量152

点赞数

文章标签： javascript ViewUI

一个简单的hello world指南，可通过Google Maps Javascript API v3在网页上显示Google Maps。

在本教程中，我们向您展示如何显示以“马来西亚Malim Nawar”（我的家乡）为中心的地图，以及如何使用“标记（小图标）”来标识地图上的位置。

完整的例子……

<html>
<head>
<title>Google Map Hello World Example</title>
<style type="text/css">
div#map_container{
	width:100%;
	height:350px;
}
</style>
<script type="text/javascript" 
   src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  function loadMap() {
    var latlng = new google.maps.LatLng(4.3695030, 101.1224120);
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
	
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"my hometown, Malim Nawar!"
    }); 
  
  }
</script>
</head>

<body onload="loadMap()">
<div id="map_container"></div>
</body>

</html>

请参阅以下说明。

1.在哪里显示Google地图

Google地图将在元素ID“ map_container ”上显示。

//...
<style type="text/css">
div#map_container{
	width:600px;
	height:500px;
}
</style>

<div id="map_container"></div>
//...

2.加载Google Maps API

要使用Google Maps API，您只需在网页中包含以下JavaScript。

<script type="text/javascript" 
	src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

什么是传感器？
传感器（通常是手机传感器）用于确定用户的位置。

3.纬度和经度

地球上的每个位置都可以用纬度或经度或所谓的“ 地理坐标 ”表示，请参阅此Wiki地理坐标以获取进一步说明。

注意
就我个人而言，我不太了解纬度和经度的工作原理，简而言之，只考虑纬度与y坐标和经度与x坐标。如果有人对此有更多解释，将不胜感激🙂

在此示例中，您可以通过此经纬度查找器网站找到“ Malim Nawar”的纬度和经度。然后，将您的纬度和经度设置为“ var latlng = new google.maps.LatLng(Latitude, Longitude) ”。

<script type="text/javascript">
  function loadMap() {
    var latlng = new google.maps.LatLng(4.3695030, 101.1224120);
    //...
  }
</script>

地理编码
将地址转换为“经度和纬度”的过程称为地理编码。在接下来的教程中，我们将提供更多的地理编码示例。

4.配置Google地图选项

可配置的值是不言自明的。请参阅此参考，以获取受支持的Google地图选项的列表。

<script type="text/javascript">
  function loadMap() {
    //...
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //...
  }
</script>

在名为“ map_container”的HTML元素ID中显示Google地图。

function loadMap() {
    //...
    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
    //...
}
</script>

创建一个标记（小图标），将鼠标悬停在标记上时配置显示位置和预定义的消息框。

function loadMap() {
    //...
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"my hometown, Malim Nawar!"
    }); 
    //...
  }
</script>

5.加载Google地图

最后一步，只需通过body onload加载功能。

<body onload="loadMap()">

6.结果

下载此示例

参考文献

标签：谷歌地图你好世界

翻译自: https://mkyong.com/google-maps/google-maps-api-hello-world-example/

cyan20115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Maps API Hello World示例

一个简单的hello world指南，可通过Google Maps Javascript API v3在网页上显示Google Maps。在本教程中，我们向您展示如何显示以“马来西亚Malim Nawar”（我的家乡）为中心的地图，以及如何使用“标记（小图标）”来标识地图上的位置。完整的例子…… <html><head><title>Goo...
复制链接

扫一扫