Google地图 - Junstyle's Blog

google maps api教程(一)：用google maps生成向导生成即时地图

2010年05月9日
by junstyle
502 views
0 comments

用google maps生成向导生成即时地图。google提供了一个向导来生成google maps的代码片段，你可以把它放入到你的网站页面中。点击此处转到向导页，并按照里面的3个简单的步骤操作。

1、定制地图的长宽、缩放级别、中心位置、中心位置的链接地址、中心位置的地址说明。当点击中心位置的那个箭头时会显示这些信息。

2、输入你网站的网址，以便生成一个API key。

3、点击生成按钮就可以生成代码了。

最后把生成的代码复制到您自己的网页中就可以使用了，以下为生成的代码例子：

  <!-- ++Begin Map Search Control Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the map search control.
  // You can place this anywhere on your page
  -->
  <div id="mapsearch">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Maps Api, Ajax Search Api and Stylesheet
  // Note: If you are already using the Maps API then do not include it again
  //       If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  //
  // The Key Embedded in the following script tags is designed to work with
  // the following site:
  // http://www.junstyle.com.cn
  -->
  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAurOz_u21LMSjFODxuxTsbxSWkWNcz8otOi80ukkm5C_9fVjCfhS7lPl_eE2MldQL6fDI9jugOBzLoA"
    type="text/javascript"></script>
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-msw&key=ABQIAAAAurOz_u21LMSjFODxuxTsbxSWkWNcz8otOi80ukkm5C_9fVjCfhS7lPl_eE2MldQL6fDI9jugOBzLoA"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Map Search Control and Stylesheet -->
  <script type="text/javascript">
    window._uds_msw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css");
  </style>

  <style type="text/css">
    .gsmsc-mapDiv {
      height : 275px;
    }

    .gsmsc-idleMapDiv {
      height : 275px;
    }

    #mapsearch {
      width : 365px;
      margin: 10px;
      padding: 4px;
    }
  </style>
  <script type="text/javascript">
    function LoadMapSearchControl() {

      var options = {
            zoomControl : GSmapSearchControl.ZOOM_CONTROL_ENABLE_ALL,
            title : "Googleplex",
            url : "http://www.google.com/corporate/index.html",
            idleMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM,
            activeMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM
            }

      new GSmapSearchControl(
            document.getElementById("mapsearch"),
            "1600 Amphitheatre Parkway, Mountain View, CA",
            options
            );

    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadMapSearchControl);
  </script>
  <!-- ++End Map Search Control Wizard Generated Code++ -->

把以上的代码放置到你的页面的body之间，不要放在head里面。

本文参考自：http://econym.org.uk/gmap/wizard.htm

JAVASCRIPT

一步步学习调用Google Map Api（三）：自定义地图类型

2009年07月13日
by junstyle
1,061 views
0 comments

使用google map提供的api可以实现自定义地图类型，如显示卫星地图、街景地图等，这几个地图类型都是google内置的几种地图，当然你也可以自定义一种地图类型，如路况、自己的地铁线路等地图信息，下面我们用google的地图数据来讲一下自定义地图类型的使用方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>Google 地图 JavaScript API 示例: 简单的地图</title>
	<script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&amp;hl=zh-CN" type="text/javascript"></script>
	<script type="text/javascript">
	function initialize() {
		var baseTileLayer = new GTileLayer(null, 12, 19);
		baseTileLayer.getTileUrl = function(tile, zoom){return "http://mt2.google.cn/mt/v=cn1.11&amp;hl=zh-CN&amp;s=Galileo&amp;x="+tile.x+"&amp;y="+tile.y+"&amp;z="+zoom;};
		var baseMapType = new GMapType([baseTileLayer], new GMercatorProjection(23), "自定义地图", {shortName: "自定义地图", alt: "自定义地图，junstyle"});

		var map = new GMap2(document.getElementById("map_container"), {mapTypes:[baseMapType]});
		map.addControl(new GLargeMapControl());
		map.addControl(new GScaleControl());
		map.setCenter(new GLatLng(39.917, 116.397), 14);
	}
	</script>
</head>
<body onload="initialize()" onunload="GUnload()">
	<div id="map_container" style="width: 500px; height: 300px"></div>
</body>
</html>

1、先定义一个平铺层var baseTileLayer = new GTileLayer(null, 12, 19); 第一个参数版权信息这里设为null，可以自己new一个，12表示最小缩放级别，19表示最大缩放级别。 baseTileLayer.getTileUrl = function(tile, zoom){return "http://mt2.google.cn/mt/v=cn1.11&hl=zh-CN&s=Galileo& x="+tile.x+"&y="+tile.y+"&z="+zoom;}，然后设置getTileUrl这个属性，它是一个方法，来获取用于平铺层的图片地址，这个地址是根据缩放级别和经纬度来确定的，我这里调用的是google的图片数据，用的是google的链接。你如果要弄自己的自定义地图，那就需要调用自己的图片了，这里比较重要。

2、定义一个地图类型。var baseMapType = new GMapType([baseTileLayer], new GMercatorProjection(23), "自定义地图", {shortName: "自定义地图", alt: "自定义地图，junstyle"})，把baseTileLayer作为参数传给它。

3、定义地图了。和以前定义地图差不多，但多了一个参数：{mapTypes:[baseMapType]}，就是第二步定义的mapType。

这样一个自定义地图类型就完成了。

JAVASCRIPT, 未分类

一步步学习调用Google Map Api（二）

2009年06月28日
by junstyle
1,233 views
0 comments

上次写了google地图api调用（一），也过了好一段时间了，今天来说说初始化地图后对地图的一些设置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>Google 地图 JavaScript API 示例: 简单的地图</title>
	<script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&amp;hl=zh-CN" type="text/javascript"></script>
	<script type="text/javascript">
		function initialize() {
		var map = new GMap2(document.getElementById("map_container"));
		map.setCenter(new GLatLng(39.917, 116.397), 14);
	}
	</script>
</head>
<body onload="initialize()" onunload="GUnload()">
	<div id="map_container" style="width: 500px; height: 300px"></div>
</body>
</html>

上面我们只是对地图的简单调用，并没有为地图设置一下配置。以下是一些可以调用的配置。

方法	返回值	说明
enableDragging()	None	启用地图拖动（默认情况下启用）。
disableDragging()	None	禁用地图拖动。
draggingEnabled()	Boolean	当且仅当启用了地图拖动时，返回 true。
enableInfoWindow()	None	启用地图上的信息窗口操作（默认情况下启用）。
disableInfoWindow()	None	如果信息窗口处于打开状态，请关闭它并禁用打开新信息窗口。
infoWindowEnabled()	Boolean	当且仅当启用了信息窗口时，返回 true。
enableDoubleClickZoom()	None	启用双击缩放地图（默认情况下启用）。
disableDoubleClickZoom()	None	禁用双击缩放地图。
doubleClickZoomEnabled()	Boolean	当且仅当启用了双击缩放地图时，返回 true。
enableContinuousZoom()	None	启用选择浏览器的连续平滑缩放（默认情况下禁用）。
disableContinuousZoom()	None	禁用连续平滑缩放。
continuousZoomEnabled()	Boolean	如果启用了连续平滑缩放，则返回 true。
enableGoogleBar()	None	为地图启用集成搜索控件 GoogleBar。如果启用，该控件会取代默认的“由 Google 强力驱动”徽标。请注意，该控件默认情况下未启用。
disableGoogleBar()	None	禁用 GoogleBar 集成搜索控件。如果禁用，默认的“由 Google 强力驱动”徽标会占据以前放置此控件的位置。请注意，该控件已经默认禁用。
enableScrollWheelZoom()	None	启用使用鼠标滚轮缩放。注意：默认情况下禁用滚轮缩放。
disableScrollWheelZoom()	None	禁用使用鼠标滚轮缩放。注意：默认情况下禁用滚轮缩放。
scrollWheelZoomEnabled()	Boolean	返回一个表示是否启用滚轮缩放的布尔值。

例如：调用enableDragging()就可以是地图可以拖动：

var map = new GMap2(document.getElementById(&amp;quot;map_container&amp;quot;));
map.setCenter(new GLatLng(39.917, 116.397), 14);
map.enableDragging(); //使地图可以拖动，默认是启用的

下面是几个默认没有开启，但比较常用的配置：

map.enableScrollWheelZoom(); //鼠标滑轮缩放地图
map.enableContinuousZoom(); //放大缩小时启用动画效果
map.doubleClickZoomEnabled() //鼠标双击放大地图

配置了地图后还可以为地图添加一些控件。比较常见的两个控件：方向盘控件（向东南西北移动地图的控件）和控制缩放级别控件，貌似官方api就提供了这两个控件（方向盘控件有一个大的和一个小的），当然你也可以实现接口，自己写控件，如写个美化的方向盘控件和缩放级别控件。下面是添加这两个控件的代码：

map.addControl(new GLargeMapControl());        //添加一个大的方向盘控件
map.addControl(new GScaleControl());           //添加一个缩放级别控件

还可以添加一个小的方向盘控件，大和小二选一：

map.addControl(new GSmallMapControl());

这样就是一个比较完整的地图了，大家可以试试。下次说说比较强大的自定义地图类型。

JAVASCRIPT, 未分类

一步步学习调用Google Map Api（一）

2009年06月12日
by junstyle
2,855 views
4 comments

Google Map API为我们提供了非常强大的地图定制功能，一步步来学习Google Map的调用方法，最终实现一个基于Google Map的路况地图，后台用asp.net实现。效果图如下：

地图上的红绿橙三色线是根据路线、路况信息实时生成的。这个以后再谈，我们先从简单的Google Map API的调用说起。Google Map Api 3.0之前是要申请Key，3.0以后好像不用申请Key了，直接引入js文件就可以调用了。下面我们用到的是GMap2（即API2.X，具体什么版本我也不是很清楚了）。

<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script>

显示Google地图也很简单了：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

	<title>Google 地图 JavaScript API 示例: 简单的地图</title>

	<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script>

	<script type="text/javascript">

		function initialize() {

		var map = new GMap2(document.getElementById("map_container"));

		map.setCenter(new GLatLng(39.917, 116.397), 14);

		}

	</script>

</head>

<body onload="initialize()" onunload="GUnload()">

	<div id="map_container" style="width: 500px; height: 300px"></div>

</body>

</html>

先实例化一个GMap2对象，提供一个Dom作为地图的容器，地图将会在这个Dom中显示，这个参数是必须的。当然实例化GMap2对象也可以传入配置参数，如：var map=new GMap2(document.getElementById("map_container"), opts?:GMapOptions)，opts参数为可选。之后我们为地图设置一个中心点，即中心的经纬度，还有初始缩放级别，这里为14。只需这两句就可以显示一个很酷的Google地图了。

最后说一下地图的宽度和高度，地图的宽和高是根据地图容器的宽高来确定的。想显示多大的地图，只需调整map_container这个容器的宽高就行了。下次说说地图的一些初始设置，如鼠标滚轮缩放地图、双击缩放地图、地图左上角的方向盘等。

JAVASCRIPT, 未分类

Junstyle's Blog

一年一年的过去了，记录些什么

google maps api教程(一)：用google maps生成向导生成即时地图

一步步学习调用Google Map Api（三）：自定义地图类型

一步步学习调用Google Map Api（二）

一步步学习调用Google Map Api（一）

最新文章

最新评论

Junstyle's Blog

一年一年的过去了，记录些什么

google maps api教程(一)：用google maps生成向导生成即时地图

一步步学习调用Google Map Api（三）：自定义地图类型

一步步学习调用Google Map Api（二）

一步步学习调用Google Map Api（一）

最新文章

最新评论

标签集合