google maps api的调用之简单示例

最新推荐文章于 2024-08-16 17:41:49 发布

vip__888

最新推荐文章于 2024-08-16 17:41:49 发布

阅读量4.5k

点赞数

分类专栏： javascript ajax 文章标签： google api javascript function json html

本文链接：https://blog.csdn.net/vip__888/article/details/5362731

版权

javascript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

ajax

9 篇文章 0 订阅

订阅专栏

由于公司开发的网站现在需要加入地图的功能，我以前了解过google maps api 在加上这两天的研究，略有小成，

以下是我的心得。

google api是由ajax获取数据在前台显示，具体如何显示的，通过ajax获取服务器响应数据，在前台现在图片，至于图片上的坐标什么的，我不知道如何实现。估计只有那些大牛们和google的工程师们才了解了。

就拿一个简单的google 在线查询地图（简单地址解析）来讲吧，我今天做的也就是那个。

首先要在引用google map 的js，但是需要你去申请一个key，免费的，这里我就用我自己申请的key来演示。

添加引用js<mce:script src="http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" mce_src="http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></mce:script> 后面的参数看到没？ file=api不用我解释，v就是版本号，key就是你申请的key。

引用好了，下面是html body里面的代码 <body οnlοad="initialize()" οnunlοad="GUnload()"> <form action="#" οnsubmit="showAddress(this.address.value); return false"> <p> <input type="text" size="60" name="address" value="北京市海淀区" /> <input type="submit" value="Go!" /> </p> <div id="map_canvas" style="width: 500px; height: 300px"></div> </form> </body>

onload有个函数，onunload有个函数，这个函数是防止内存泄漏工具，具体为什么会内存泄漏，咱也不懂。

这里有个表单，提交的时候调用showAddress这个函数，这个函数就是解析函数，传递的也就是你输入到文本框的值。

先介绍 onload 也就是页面加载的时候调用的这个函数

<mce:script type="text/javascript"></mce:script>

/************************官方解释********************/ GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）我们使用 JavaScript new 操作符创建此类的一个新实例。当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。HTML 节点是 JavaScript document 对象的子对象，而且我们通过 document.getElementById() 方法获得该元素的引用。此代码定义了一个变量（名为 map），并将新 GMap2 对象赋值给该变量。函数 GMap2() 称为“构造函数”，其定义（在 Google 地图 API 参考中简述）如下所示：构造函数说明 GMap2(container, opts?) 在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数。请注意因为 JavaScript 是松散类型的语言，我们可以不填写构造函数的任何可选参数，此处也未这样做。 /********************解释完毕**********************/

下面是地址解析

地址解析

地址解析是将地址（如“1600 Amphitheatre Parkway, Mountain View, CA”）转换为地理坐标（如经度 -122.083739 和纬度 37.423021）的过程，可以用于放置标记符或定位地图。Google 地图 API 包含地址解析服务，可以通过 HTTP 请求直接访问，也可以通过使用 GClientGeocoder 对象来访问。

请注意，地址解析是一种时间和资源密集型任务。尽量为您的地址预先进行地址解析（使用 HTTP 地址解析器或其它地址解析服务），并使用地址解析缓存存储您的结果。

地址解析对象

可以通过 GClientGeocoder 对象访问 Google 地图 API 地址解析服务。使用 GClientGeocoder.getLatLng() 将字符串地址转换为 GLatLng。此方法采用要转换的字符串地址以及在检索到地址后要执行的回调函数作为参数。该回调函数是必要的，因为地址解析涉及向 Google 的服务器发送请求，可能需要一些时间。

在此示例中，我们将对一个地址进行地址解析，在该点添加标记，并打开一个显示该地址的信息窗口。请注意，该回调函数作为函数显式声明传递。

var map = new GMap2(document.getElementById("map_canvas")); 
var geocoder = new GClientGeocoder(); 
 
function showAddress(address) { 
  geocoder.getLatLng( 
    address, 
    function(point) { 
      if (!point) { 
        alert("无法解析:" + address); 
      } else { 
        map.setCenter(point, 13); 
        var marker = new GMarker(point); 
        map.addOverlay(marker); 
        marker.openInfoWindowHtml(address); 
      } 
    } 
  ); 
}

查看示例 (geocoding-simple.html)

还可以通过 GLatLngBounds 方法修改地图 API 地址解析器以指定解析结果在指定的视口内（视口是一个 GClientGeocoder.setViewport() 类型的矩形区域)。您可以使用 GClientGeocoder.setBaseCountryCode() 方法返回为特定地区（国家）定制的结果。可以对 Google 地图主应用程序提供地址解析的每个主要地区发送地址解析请求。例如，搜索“Toledo”将返回西班牙地区内（http://maps.google.es）由国家或地区代码“es”指定的不同结果，而不是默认的美国 (http://maps.google.com) 地区内的结果。

抽取结构化地址

如果要访问有关某个地址的结构化信息，GClientGeocoder 还提供了 getLocations() 方法，该方法返回包括以下信息的 JSON 对象：

Status
- request - 请求类型。在本例中，始终是 geocode。
- code - 响应代码，类似于 HTTP 状态代码，指示地址解析请求是否成功。请参见状态代码完整列表。
Placemark - 如果地址解析器发现多个匹配项，则可能返回多个地标。
- address - 格式化良好，大小写正确的地址版本。
- AddressDetails - 格式化为 xAL（或可扩展地址语言，一种地址格式化的国际标准）的地址。
- - Accuracy - 表示指定地址的地址解析所能达到的精确度的属性。请参见可能值列表。
- Point - 三维空间中的点。
- - coordinates - 地址的经度、纬度和海拔。在本例中，海拔始终设置为 0。

下面我们展示使用地址解析器解析 Google 总部地址返回的 JSON 对象：

{ 
  "name": "1600 Amphitheatre Parkway, Mountain View, CA, USA", 
  "Status": { 
    "code": 200, 
    "request": "geocode" 
  }, 
  "Placemark": [ 
    { 
      "address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA", 
      "AddressDetails": { 
        "Country": { 
          "CountryNameCode": "US", 
          "AdministrativeArea": { 
            "AdministrativeAreaName": "CA", 
            "SubAdministrativeArea": { 
              "SubAdministrativeAreaName": "Santa Clara", 
              "Locality": { 
                "LocalityName": "Mountain View", 
                "Thoroughfare": { 
                  "ThoroughfareName": "1600 Amphitheatre Pkwy" 
                }, 
                "PostalCode": { 
                  "PostalCodeNumber": "94043" 
                } 
              } 
            } 
          } 
        }, 
        "Accuracy": 8 
      }, 
      "Point": { 
        "coordinates": [-122.083739, 37.423021, 0] 
      } 
    } 
  ] 
}

在此示例中，我们使用 getLocations() 方法对地址进行地址解析，从 JSON 抽取地址的良好格式化版本和两字母的国家或地区代码，并在信息窗口中显示。

var map; 
var geocoder; 
 
function addAddressToMap(response) { 
  map.clearOverlays(); 
  if (!response || response.Status.code != 200) { 
    alert("/"" + address + "/" not found"); 
  } else { 
    place = response.Placemark[0]; 
    point = new GLatLng(place.Point.coordinates[1], 
                        place.Point.coordinates[0]); 
    marker = new GMarker(point); 
    map.addOverlay(marker); 
    marker.openInfoWindowHtml(place.address + '<br>' +  
      '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode); 
  } 
}