Two years ago I asked you "where are my readers?" Today, I ask you again, where are you?
两年前，我问你“我的读者在哪里？ ”今天，我又问你，你在哪里？
Go sign my Google Maps Guest Map, would you, Dear Reader? It'll just take a moment, no registration required.
转到我签字谷歌地图游客的地图，你会不会，亲爱的读者？ 只需一点时间，无需注册。
UPDATE: Read the Guest Map GuestBook directly, without the map.
更新：直接阅读Guest Map GuestBook ，而不带地图。
I did a demo site with Google Maps and the GoogleMaps API recently for work. It sure is a nice clean API if you've got the data. I was able to integrate a nice map a day. I'm sure with a weeks work (which I don't have, it's just a demo) one could do some great stuff.
我最近使用Google Maps和GoogleMaps API制作了一个演示站点。 如果您有数据，那肯定是一个不错的清洁API。 我每天可以整合一张漂亮的地图。 我敢肯定，只要花几个星期的时间(我还没有，这只是一个演示)，一个人就能做得很好。
You just visit the Google Maps API page and sign up for an API key. You're limited to like a billion views, so don't go over! You can read the API docs as much as I can, so I won't bore you too much, but here's a little of what I did to jumpstart my demo.
您只需访问Google Maps API页面并注册一个API密钥。 您被限制在十亿个视图之内，所以不要过去！ 您可以阅读尽可能多的API文档，因此不会给您带来太多负担，但这是我为快速启动演示所做的一些努力。
(There's LOTS of ways to do this, BTW, this is just one. The sample may not be "cutting edge" but it's accessible.)
(顺便说一句，有很多方法可以做到这一点，这只是其中一种。示例可能不是“最先进的”，但可以访问。)
I was actually integrating the Timeline Control and its XML format with a Google Map...so, let's just say you have an existing XML format:
我实际上是在将时间轴控件及其XML格式与Google Map集成在一起...所以，我们只说您已有一个XML格式：
<data>
<event
start="Feb 13 2007 09:00:00 GMT"
end="Feb 16 2007 09:00:00 GMT"
isDuration="true"
title="Some Window of Time">
Be sure to pay attention!</event><数据> <事件start =“ Feb 13 2007 09:00:00 GMT” end =“ Feb 16 2007 09:00:00 GMT” isDuration =“ true” title =“时间之窗”> 请务必注意！</ event>
<event
start="Feb 4 2007 10:04:00 GMT-0500"
title="Chipotle $4.58"lat="45.483484" lng="-122.800026" >Food</event><事件start =“ Feb 4 2007 10:04:00 GMT-0500” title =“辣椒$ 4.58” lat =“ 45.483484” lng =“-122.800026” >食物</ event>
<event
start="Feb 7 2007 16:00:00 GMT-0500"
title="Jack in the Box $9.44"lat="45.493112" lng="-122.805862">Food</event><事件start =“ Feb 7 2007 16:00:00 GMT-0500” title =“盒子里的杰克$ 9.44” lat =“ 45.493112” lng =“-122.805862” >食物</ event>
</data>
</ data>
I can just add geographic data "along for the ride," made especially easy because this data doesn't have a schema (although I could put it in another namespace).
我可以仅添加地理数据“随身携带”，这特别容易，因为该数据没有模式(尽管我可以将其放在另一个命名空间中)。
You add this line to your page:
您将此行添加到您的页面：
<script src=http://maps.google.com/maps?file=api
&v=2&key=YOURAPIKEY
type="text/javascript"></script><script src = http：//maps.google.com/maps？file = api ＆amp; v = 2＆amp; key =您的APIKEY type =“ text / javascript”> </ script>
Then add a map somewhere:
然后在某处添加地图：
<div id="map" style="height: 200px" ></div>
<div id =“ map” style =“ height：200px”> </ div>
Then hook up your Load and Unloads:
然后挂接您的加载和卸载：
<BODY οnlοad="GLoad();" οnresize="GUnload()">
<BODY onload =“ GLoad();” onresize =“ GUnload()”>
Then add a little script like this to get your XML and yank the data you need. The interesting bits are in red.
然后添加一个类似这样的小脚本以获取XML并提取所需的数据。 有趣的是红色。
<script type="text/javascript">
<script type =“ text / javascript”>
function GLoad() {
if (GBrowserIsCompatible()) {
var gmarkers = [];
var htmls = [];
var i = 0;
函数GLoad(){ 如果(GBrowserIsCompatible()){ var gmarkers = []; var htmls = []; var i = 0;
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
i++;
return marker;
}
//创建标记并设置事件窗口的函数函数createMarker(point，name，html){ var marker = new GMarker(point); GEvent.addListener(marker，“ click”，function(){ marker.openInfoWindowHtml(html); }); //保存我们稍后需要用于side_bar的信息gmarkers [i] =标记； htmls [i] = html; //在side_bar html中添加一行side_bar_html + ='<a href="javascript:myclick(' + i +')">'+名称+'</a> <br>'; i ++; 返回标记； }
// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
//此函数获取点击并打开相应的信息窗口函数myclick(i){ gmarkers [i] .openInfoWindowHtml(htmls [i]); }
// create the map var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl()); //SCOTT - EXAMPLES OF OTHER STUFF YOU CAN DO
//map.addControl(new GLargeMapControl ());
//map.addControl(new GMapTypeControl());
// THE 10 is the ZOOM LEVEL map.setCenter(new GLatLng(45.519579, -123.004303), 10);
//创建地图var map = new GMap2(document.getElementById(“ map”)); map.addControl(new GSmallMapControl()); // SCOTT-您可以做的其他事例//map.addControl(new GLargeMapControl()); //map.addControl(new GMapTypeControl()); // The 10 is the ZOOM LEVEL map.setCenter(new GLatLng(45.519579，-123.004303)，10);
// Read the data from example.xml var request = GXmlHttp.create();
request.open("GET", "your.xml", true); request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it var markers = xmlDoc.documentElement.getElementsByTagName("event"); for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker...don't bother without lat data
var latVar = markers[i].getAttribute("lat")
if(latVar != null)
{ var lat = parseFloat(latVar);
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng); var html = markers[i].getAttribute("title"); // or whatever you like
var label = markers[i].getAttribute("title");
// create the marker var marker = createMarker(point,label,html);
map.addOverlay(marker); }
}
//从example.xml读取数据var request = GXmlHttp.create(); request.open(“ GET”，“ your.xml”，true); request.onreadystatechange = function(){ 如果(request.readyState == 4){ var xmlDoc = request.responseXML; //获取标记数组并循环遍历var markers = xmlDoc.documentElement.getElementsByTagName(“ event”); for(var i = 0; i <markers.length; i ++){ //获取每个标记的属性...没有经纬度数据不要打扰var latVar = markers [i] .getAttribute(“ lat”) if(latVar！=空) { var lat = parseFloat(latVar); var lng = parseFloat(markers [i] .getAttribute(“ lng”));; var point = new GLatLng(lat，lng); var html = markers [i] .getAttribute(“ title”); //或您喜欢的任何东西var label = markers [i] .getAttribute(“ title”); //创建标记var marker = createMarker(point，label，html); map.addOverlay(marker); } }
// put the assembled side_bar_html contents into the side_bar div // A Sidebar is optional, you can just comment this out, // or not have a side_bar element. document.getElementById("side_bar").innerHTML = side_bar_html; }}request.send(null);} else {alert("Sorry, the Google Maps API is not compatible with this browser");}// This Javascript is based on code provided by the// Blackpool Community Church Javascript Team// http://www.commchurch.freeserve.co.uk/// http://www.econym.demon.co.uk/googlemaps/}//]]></script>
//将汇编的side_bar_html内容放入side_bar div //补充工具栏是可选的，您可以对此进行注释，或者是否没有side_bar元素。 document.getElementById(“ side_bar”)。innerHTML = side_bar_html; }} request.send(null);}否则{alert(“对不起，Google Maps API与该浏览器不兼容”);} //此Javascript是基于// Blackpool Community Church Javascript Team /提供的代码/ http://www.commchurch.freeserve.co.uk/ // http://www.econym.demon.co.uk/googlemaps/ } //]]> </ script>
I can't show you the demo I did, because it's super-secret-financial stuff, but perhaps you'll think of a creative new way to include geographic data in the project you're currently working on!
我无法向您展示我所做的演示，因为它是超级秘密的财务内容，但是也许您会想到一种新颖的新方法，将地理数据包含在您当前正在研究的项目中！
翻译自: https://www.hanselman.com/blog/google-guestmap-2007-and-adding-google-maps-to-your-site
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
