sunlei 发表于 2006 年 1 月 14 日 12:56:42

把Google Maps加到自己的Blog里

<P>首先需要到<A href="http://www&#46;google&#46;com/apis/maps/">http://www&#46;google&#46;com/apis/maps/</A>申请一个API key，你需要用你的GmailID登录。申请成功以后你会得到一个API key，和一段添加到网页的事例代码，去掉一些没有用的Html代码以后剩下：</P><PRE><CODE>&lt;script src="http://maps&#46;google&#46;com/maps?file=api&amp;v=1&amp;key=
" type="text/java script"&gt;&lt;/script&gt;
    &lt;div id="map" style="width: 500px; height: 400px"&gt;&lt;/div&gt;
    &lt;script type="text/java script"&gt;
    //&lt;![CDATA[
   
    var map = new GMap(document&#46;getElementById("map"));
    map&#46;addControl(new GSmallMapControl());
    map&#46;centerAndZoom(new GPoint(-122&#46;1419, 37&#46;4419), 4);
   
    //]]&gt;
    &lt;/script&gt;</CODE></PRE>
<P><A id=more-299></A><BR>其中<BR><CODE>&lt;div id="map" style="width: 500px; height: 400px"&gt;&lt;/div&gt;</CODE></P>
<P>这行可以自定义显示Google Maps的宽（width）和高（height）。</P>
<P><CODE>map&#46;centerAndZoom(new GPoint(-122&#46;1419, 37&#46;4419), 4);</CODE></P>
<P>这行算是整段代码最重要的部分，可以用来调整Google Maps显示的地理位置（<CODE>-122&#46;1419, 37&#46;4419</CODE>）和大小（<CODE>4</CODE>）。我们下面要做的就是把这两行代码替换成适合自己的。</P>
<P>到<A href="http://maps&#46;google&#46;com/">http://maps&#46;google&#46;com</A>在地图上找到自己所在的位置，用鼠标双击，你双击的那点就会显示在地图的中央，然后点击右上角的<A href="http:///#">Link to this page</A>，地址栏里的地址就包含了你的坐标信息，比如我在的大连地址是：</P>
<P><CODE>http://maps&#46;google&#46;com/?ll=38&#46;794768,121&#46;294556&amp;spn=1&#46;051049,2&#46;04071</CODE></P>
<P>其中<CODE>38&#46;794768,121&#46;294556</CODE>，就是大连的坐标，把他们替换到代码里:</P>
<P><CODE>map&#46;centerAndZoom(new GPoint(121&#46;294556, 38&#46;794768), 15);</CODE></P>
<P>因为Google Maps显示的中国的信息有限，所以不要把最后的数值设得太小，我写的是15（最大到16），具体自己把握就行。</P>
<P>如果想在自己的位置上加个标记，那把下面这段代码加到<CODE>map&#46;centerAndZoom&#46;&#46;&#46;</CODE>这行下面：</P>
<P><CODE>map&#46;addOverlay(new GMarker(new GPoint(121&#46;294556, 38&#46;794768)));</CODE></P>
<P>还想在标记上加上弹出气泡的功能，就加入下面一段：</P><PRE><CODE>    var dalian = new GMarker (new GPoint (121&#46;294556, 38&#46;794768));
GEvent&#46;addListener (dalian, "click", function() {
dalian&#46;openInfoWindowHtml ("我在大连 Oh!Yeah!");
});
map&#46;addOverlay (dalian);</CODE></PRE>
<P>最后的代码就是这些：</P><PRE><CODE>&lt;script src="http://maps&#46;google&#46;com/maps?file=api&amp;v=1&amp;key=
" type="text/java script"&gt;&lt;/script&gt;
    &lt;div id="map" style="width: 400px; height: 300px"&gt;&lt;/div&gt;
    &lt;script type="text/java script"&gt;
    //&lt;![CDATA[
   
    var map = new GMap(document&#46;getElementById("map"));
    map&#46;addControl(new GSmallMapControl());
    map&#46;centerAndZoom(new GPoint(121&#46;294556, 38&#46;794768), 15);
      var dalian = new GMarker (new GPoint (121&#46;294556, 38&#46;794768));
GEvent&#46;addListener (dalian, "click", function() {
dalian&#46;openInfoWindowHtml ("我在大连 Oh!Yeah!");
});
map&#46;addOverlay (dalian);
    //]]&gt;
    &lt;/script&gt;</CODE></PRE>

mydo 发表于 2006 年 1 月 14 日 13:46:25

顶一下.....

Lnaliang 发表于 2006 年 1 月 15 日 19:33:33

http://okfree.zaccum.com/

http://okfree.ag2.us/

xchange 发表于 2006 年 1 月 15 日 22:40:24

不错，那个API key从哪里得到？

自由荒岛 发表于 2006 年 1 月 18 日 17:56:12

/看不到?

sunlei 发表于 2006 年 1 月 14 日 12:56:42

把Google Maps加到自己的Blog里

<P>首先需要到<A href="http://www&#46;google&#46;com/apis/maps/">http://www&#46;google&#46;com/apis/maps/</A>申请一个API key，你需要用你的GmailID登录。申请成功以后你会得到一个API key，和一段添加到网页的事例代码，去掉一些没有用的Html代码以后剩下：</P><PRE><CODE>&lt;script src="http://maps&#46;google&#46;com/maps?file=api&amp;v=1&amp;key=
" type="text/java script"&gt;&lt;/script&gt;
    &lt;div id="map" style="width: 500px; height: 400px"&gt;&lt;/div&gt;
    &lt;script type="text/java script"&gt;
    //&lt;![CDATA[
   
    var map = new GMap(document&#46;getElementById("map"));
    map&#46;addControl(new GSmallMapControl());
    map&#46;centerAndZoom(new GPoint(-122&#46;1419, 37&#46;4419), 4);
   
    //]]&gt;
    &lt;/script&gt;</CODE></PRE>
<P><A id=more-299></A><BR>其中<BR><CODE>&lt;div id="map" style="width: 500px; height: 400px"&gt;&lt;/div&gt;</CODE></P>
<P>这行可以自定义显示Google Maps的宽（width）和高（height）。</P>
<P><CODE>map&#46;centerAndZoom(new GPoint(-122&#46;1419, 37&#46;4419), 4);</CODE></P>
<P>这行算是整段代码最重要的部分，可以用来调整Google Maps显示的地理位置（<CODE>-122&#46;1419, 37&#46;4419</CODE>）和大小（<CODE>4</CODE>）。我们下面要做的就是把这两行代码替换成适合自己的。</P>
<P>到<A href="http://maps&#46;google&#46;com/">http://maps&#46;google&#46;com</A>在地图上找到自己所在的位置，用鼠标双击，你双击的那点就会显示在地图的中央，然后点击右上角的<A href="http:///#">Link to this page</A>，地址栏里的地址就包含了你的坐标信息，比如我在的大连地址是：</P>
<P><CODE>http://maps&#46;google&#46;com/?ll=38&#46;794768,121&#46;294556&amp;spn=1&#46;051049,2&#46;04071</CODE></P>
<P>其中<CODE>38&#46;794768,121&#46;294556</CODE>，就是大连的坐标，把他们替换到代码里:</P>
<P><CODE>map&#46;centerAndZoom(new GPoint(121&#46;294556, 38&#46;794768), 15);</CODE></P>
<P>因为Google Maps显示的中国的信息有限，所以不要把最后的数值设得太小，我写的是15（最大到16），具体自己把握就行。</P>
<P>如果想在自己的位置上加个标记，那把下面这段代码加到<CODE>map&#46;centerAndZoom&#46;&#46;&#46;</CODE>这行下面：</P>
<P><CODE>map&#46;addOverlay(new GMarker(new GPoint(121&#46;294556, 38&#46;794768)));</CODE></P>
<P>还想在标记上加上弹出气泡的功能，就加入下面一段：</P><PRE><CODE>    var dalian = new GMarker (new GPoint (121&#46;294556, 38&#46;794768));
GEvent&#46;addListener (dalian, "click", function() {
dalian&#46;openInfoWindowHtml ("我在大连 Oh!Yeah!");
});
map&#46;addOverlay (dalian);</CODE></PRE>
<P>最后的代码就是这些：</P><PRE><CODE>&lt;script src="http://maps&#46;google&#46;com/maps?file=api&amp;v=1&amp;key=
" type="text/java script"&gt;&lt;/script&gt;
    &lt;div id="map" style="width: 400px; height: 300px"&gt;&lt;/div&gt;
    &lt;script type="text/java script"&gt;
    //&lt;![CDATA[
   
    var map = new GMap(document&#46;getElementById("map"));
    map&#46;addControl(new GSmallMapControl());
    map&#46;centerAndZoom(new GPoint(121&#46;294556, 38&#46;794768), 15);
      var dalian = new GMarker (new GPoint (121&#46;294556, 38&#46;794768));
GEvent&#46;addListener (dalian, "click", function() {
dalian&#46;openInfoWindowHtml ("我在大连 Oh!Yeah!");
});
map&#46;addOverlay (dalian);
    //]]&gt;
    &lt;/script&gt;</CODE></PRE>
页: [1]
查看完整版本: 把Google Maps加到自己的Blog里