<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>NeatCN(NeatStudio工作室) &#187; google maps</title>
	<atom:link href="http://www.neatcn.com/tags/google-maps/feed" rel="self" type="application/rss+xml" />
	<link>http://www.neatcn.com</link>
	<description>NeatStudio工作室</description>
	<lastBuildDate>Fri, 09 Dec 2011 13:07:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Google maps API开发(一)</title>
		<link>http://www.neatcn.com/show-29-1.shtml</link>
		<comments>http://www.neatcn.com/show-29-1.shtml#comments</comments>
		<pubDate>Wed, 17 Mar 2010 09:55:47 +0000</pubDate>
		<dc:creator>膘叔</dc:creator>
				<category><![CDATA[Javascript开发]]></category>
		<category><![CDATA[api]]></category>
		<category><![CDATA[google maps]]></category>

		<guid isPermaLink="false">http://www.neatcn.com/?p=29</guid>
		<description><![CDATA[由于自己想在mzditu.com上运用google maps api进行开发，在看到这篇相对比较简单的介绍文章时，就下载下来进行了学习，现在贴上分析代码。 一、加载 Google maps API的JS文件 很明显的，你可以看到，我们加载的JS文件来自于http://ditu.google.com，而后面的apikey则需要到http://code.google.com/intl/zh-CN/apis/maps/signup.html注册申请。（因为，它需要绑定自己的域名，否则不能被正确使用） 二、创建一个简单的应用 1、加载Google地图 //声明一个GMap2全局变量 var map; function load() { //检查浏览器的兼容性. if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); //加载地图 map.addControl(new GLargeMapControl()); //增加全功能控件 map.addControl(new GMapTypeControl()); //设置地图类型 map.enableScrollWheelZoom(); //设置地图支持滚轮 map.setCenter(new GLatLng(39.990168, 116.295304), 10); //设置地图的中心坐标 map.enableDoubleClickZoom(); //开启双击google &#8230; <a href="http://www.neatcn.com/show-29-1.shtml">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>由于自己想在mzditu.com上运用google maps api进行开发，在看到这篇相对比较简单的介绍文章时，就下载下来进行了学习，现在贴上分析代码。</p>
<p><strong>一、加载 Google maps API的JS文件</strong></p>
<p>很明显的，你可以看到，我们加载的JS文件来自于<a href="http://ditu.google.com">http://ditu.google.com</a>，而后面的apikey则需要到<a href="http://code.google.com/intl/zh-CN/apis/maps/signup.html">http://code.google.com/intl/zh-CN/apis/maps/signup.html</a>注册申请。（因为，它需要绑定自己的域名，否则不能被正确使用）</p>
<p><strong>二、创建一个简单的应用</strong></p>
<p>1、加载Google地图</p>
<pre class="brush:javascript">//声明一个GMap2全局变量
var map;
function load()
{
    //检查浏览器的兼容性.
    if (GBrowserIsCompatible())
    {
        map = new GMap2(document.getElementById("map")); //加载地图
        map.addControl(new GLargeMapControl()); //增加全功能控件
        map.addControl(new GMapTypeControl()); //设置地图类型
        map.enableScrollWheelZoom(); //设置地图支持滚轮
        map.setCenter(new GLatLng(39.990168, 116.295304), 10); //设置地图的中心坐标
        map.enableDoubleClickZoom(); //开启双击google map会自动放大.
        map.enableScrollWheelZoom(); //开启滚动鼠标自动放大和缩小.
          //
    }
}
</pre>
<p>2、添加一个创建GMarker的方法</p>
<pre class="brush:javascript">function createMarker(baseIcon, point, html)
{
    var icon = new GIcon(baseIcon);
    var marker = new GMarker(point, icon);
    GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
    return marker;
}
</pre>
<p>3、调用GMarker方法</p>
<pre class="brush:javascript">var icon = new GIcon(G_DEFAULT_ICON);
var point = new GPoint(116.429114, 39.934322);
var html = '
<div><span style="color: blue;">HelloWorld！</span></div>

';
var marker = createMarker(icon, point, html);
map.addOverlay(marker);
</pre>
<p>这样一个简单的HelloWorld就显示出来了<br />
通过这个例子我们可以了解到GMap2、GMarker、GIcon这几个核心类的基本应用，现在让我们运行一下这段代码看看实际效果先。</p>
<p>【由于我的runcode插件有问题，请直接到这里下载并测试吧：<a href="http://files.cnblogs.com/cyan/01.rar">http://files.cnblogs.com/cyan/01.rar</a>】<br />
原文请参考：http://www.cnblogs.com/cyan/archive/2010/03/15/1685867.html</p>
]]></content:encoded>
			<wfw:commentRss>http://www.neatcn.com/show-29-1.shtml/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

