使用 Google Maps API

引言

我是一个编程初学者，正在努力学习。我一直喜欢使用 Google 地图，也喜欢开发者在他们的客户网站上使用的那些小地图，所以我决定自己学习如何制作它们！

背景

我开始编写代码是在 W3 Schools 看到一个教程 这里。IPInfo 是我在一个之前项目中发现的网站。我想使用 IP 信息中的位置坐标，来创建一个地图，显示至少你的 ISP 如何路由你的互联网连接！

Using the Code

IPINFO.IO

这是一个获取你的 IP 地址位置的 API，或者至少是你的 ISP 将提供的 API。

访问 Ipinfo.io，该网站会提供你的 IP 地址以及关于你位置的更多信息。

使用 Google 地图所需的信息是 Latitude（纬度）和 Longitude（经度）。该 API 提供包含上述信息的 JSON 数据。这个例子有点不足，因为它缺少城市和地区的数据，这是由于我的 ISP 定位我的 IP 地址的位置造成的。该 API 可以通过 JQuery、Ruby、NodeJS、Python 和 curl 获取这些数据。

JQuery 的代码如下所示

我的 App 中的代码如下。我获取 JSON 数据并将其放入一个名为 place 的变量中。Object Grid 将包含 API 提供的所有信息。以下是从控制台复制的内容。

Object { ip: "69.34.118.3", hostname: "mo-69-34-118-3.sta.embarqhsd.net", city: "",
region: "", country: "US", loc: "37.7510,-97.8220", org: "AS18494 Embarq Corporation" } 

下面的代码将生成此代码。我可以通过调用 grid.loc 来提取位置。然后我需要分割坐标，因为我的映射代码在读取组合坐标时遇到了一些问题。所以我将它们分割开来以便用作坐标。

// Any source code blocks look like this

// call API
var place = $.getJSON('http://ipinfo.io', function(grid){
console.log(grid.ip)
// check IP
console.log(grid.loc)

var loc = grid.loc;
// check Grid
//split co ordiantes
var str_array = loc.split(',');

//

Google Maps API

如果你看上面的内容，坐标是一个正值，然后是一个负值。第二个坐标中的负值表示西半球，正值表示东半球。因此，德国或希腊的位置将有两个正值。美国大陆和加拿大将有一个正值和一个负值。澳大利亚将有一个负值用于 N/S，然后有一个正值用于 E/W，而南美洲将有两个负值。

世界各地地点的 Google Maps 经纬度坐标。

• 蒙得维的亚，乌拉圭 -34.9011, -56.1645
• 珀斯，澳大利亚 -31.9535, 115.8570
• 柏林，德国 52.5200, 13.4050
• 雅典，希腊 37.9838, 23.7275
• 堪萨斯城，密苏里州 39.0997, -94.5786

要在你的网站上创建一个 Google 地图，首先需要添加 API 及其 JS 的引用，如下所示：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

然后，在下面，你只需要两段 JS 代码；一段是你想映射坐标的位置，另一段是地图的美观设置。在下面的例子中，地图的缩放级别设置为 10，并且坐标位置居中显示在地图上。代码的第二部分获取一个 HTML 元素，然后用 MAP 填充该元素。

GOOGLE MAPS JS

// Any source code blocks look like this

var firstMap = {
       center: new google.maps.LatLng( 30.8225, 28.9543), zoom: 10
     }
     var map = new google.maps.Map(document.getElementById("map"), firstMap);
    
     
     var secondMap = {
       center: new google.maps.LatLng(str_array[0],str_array[1]), zoom: 10
     }
     var map2 = new google.maps.Map(document.getElementById("map1"), secondMap);
     
    
     var thirdMap = {
       center: new google.maps.LatLng(48.7,44.51), zoom: 10
     }
     var map3 = new google.maps.Map(document.getElementById("map2"), thirdMap);

      
     var forthMap = {
       center: new google.maps.LatLng(49.3365, -0.4617), zoom: 10
     }
     var map4 = new google.maps.Map(document.getElementById("map3"), forthMap);
      
      var fithMap = {
       center: new google.maps.LatLng(49.3100, -0.3286), zoom: 10
     }
     var map5 = new google.maps.Map(document.getElementById("map4"), fithMap);
      
      var sixthMap = {
       center: new google.maps.LatLng(49.3697, -0.8711), zoom: 10
     }
     var map5 = new google.maps.Map(document.getElementById("map5"), sixthMap);
//

GOOGLE MAPS HTML

<div class="row">
     <div class="col-md-4">
         <h4>El Alamein</h4>
       <div id="map" >
         
       </div>
     </div>
     
     <div class="col-md-4">
         <h4>Possibly Your Location or your isp server location</h4>
       <div id="map1" >
         
       </div>
     </div>
     <div class="col-md-4">
         <h4>Stalingrad</h4>
       <div id="map2" >
         
       </div>
     </div>
   </div>
   <div class="row">
      
     <div class="col-md-4">
         <h4>Juno Beach</h4>
       <div id="map3" >
         
       </div>
     </div>
     
     <div class="col-md-4">
         <h4>Sword Beach</h4>
       <div id="map4" >
         
       </div>
     </div>
     <div class="col-md-4">
         <h4>Omaha Beach</h4>
       <div id="map5" >
         
       </div>
     </div>
   </div>

GOOGLE MAPS CSS

#map
{
   height: 400px;
   padding: 10px;
}

#map1
{
   height: 400px;
   padding: 10px;
}

#map2
{
   height: 400px;
   padding: 10px;
}

#map3
{
   height: 400px;
   padding: 10px;
}

#map4
{
   height: 400px;
   padding: 10px;
}

#map5
{
   height: 400px;
   padding: 10px;
}

body
{
   margin: 10px;
}

参考文献

• https://w3schools.org.cn/howto/howto_google_maps.asp
• https://ipinfo.io/

关注点

这只是一个基本的应用程序，用于使用一些映射 API 来创建你自己的内容。

历史

• 2016 年 6 月 9 日：初始版本