Google Maps API 初探

在使用之前需要访问 https://console.developers.google.com/dcredirect/ 按如下流程申请一个 Key。

Google Maps API 初探 Google Maps API 初探 Google Maps API 初探 Google Maps API 初探 Google Maps API 初探

然后是 Google Maps API V3 的实例:

加载 Google Maps API

Code   ViewPrint
  1. <script type="text/javascript" src="http://www.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1Q    fUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>

定义全局变量和公共方法

Code   ViewPrint
  1. var map;//GMap2的核心对象
  2. var geocoder = null;//用来解析的
  3. var markers = new Array();//用来存放GMarker
  4. //查询点击事件
  5. function showLocation() {
  6.     map.clearOverlays();
  7.     document.getElementById('divOutput').innerHTML = "搜索中...";
  8.     var address = document.getElementById('txtAddress').value;
  9.     geocoder.getLocations(address, cb_showLocation);//搜索的核心方法
  10. }
  11. //回调事件,主要在界面上描点和右侧产生列表信息
  12. function cb_showLocation(result) {
  13.     // 显示结果
  14.     if (result.Status.code == G_GEO_SUCCESS)
  15.     {
  16.         document.getElementById("divOutput").innerHTML = "成功 >_< 共找到 " + result.Placemark.    length + " 个地点" +"<br />";
  17.         var icon = new GIcon(G_DEFAULT_ICON);
  18.         var lat, lng, point, address, marker;
  19.         for (var i = 0; i < result.Placemark.length; i++) {
  20.             lat = result.Placemark[i].Point.coordinates[1]; // lat
  21.             lng = result.Placemark[i].Point.coordinates[0]; // lng
  22.             address = result.Placemark[i].address; // 地址
  23.             point = new GLatLng(lat, lng);
  24.             document.getElementById("divOutput").innerHTML += ((i + 1) + " " + address + " <small>" + point.toString() + "</small><br />");
  25.             createMarker(icon, point, address, i);
  26.         }
  27.     }
  28.     else {
  29.         document.getElementById("divOutput").innerHTML = result.Status.code;
  30.     }
  31. }

地图初始化

Code   ViewPrint
  1. function init() {
  2.     //检查浏览器的兼容性.
  3.     if (GBrowserIsCompatible()) {
  4.         map = new GMap2(document.getElementById("map_canvas"));
  5.         //设置地图的中心坐标.
  6.         var loc = new GLatLng(31.776369, 119.967261);
  7.         map.setCenter(loc, 14);
  8.         //创建带有可在四个方向平移、放大、缩小的按钮,以及缩放滑块的控件。
  9.         map.addControl(new GLargeMapControl());
  10.         //创建带有切换地图类型的按钮的控件。
  11.         map.addControl(new GMapTypeControl());
  12.         //设置地图支持滚轮
  13.         map.enableScrollWheelZoom();
  14.         //实例化一个地址解析
  15.         geocoder = new GClientGeocoder();
  16.     }
  17. }

定义页面加载事件和卸载事件

  1. window.onload = init;
  2. window.onunload = GUnload;

主界面

Code   ViewPrint
  1. <div id="map_canvas" style="width: 1035px; height: 500px; float: none; margin: 10px 0px 10px 0px; text-align:center"></div>
  2. <font size="3"  color="#000000" style="margin: 10px 0px 0px 0px">输入查询地点:</font><input type="text" id="txtAddress" name="txtAddress" class=small    Input size="60px"/><input type="button" value="查询" class="buttonface" onclick="showLocation();" />
  3. <div id="divOutput" style="float:left;" ></div>

至此整个 Google Maps API 的实例就完成了,下面是完整代码和雨人博客的演示页面:

实例代码:

演示地址:http://rainman.me/maps.html

文件下载

zyq

如果我的文章对您有帮助,请我喝杯咖啡吧~

支付宝转账打赏⬆️

微信钱包转账打赏⬆️

目前评论:1   其中:访客  1   博主  0

  1. 韩国时尚购物起义 0

    失败的人,永远不冒险。

评论加载中...

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: