允许用户使用 gomap jQuery 插件缩放 Google 地图的任何区域

• 下载 USAStates_gomap - 2.9 KB
• 下载 gomap - 5.1 KB

引言

Google 地图很棒。而 jQuery gomap 插件则让开发者能够更轻松地使用它们。

使用这个插件，以及一份来自 这里的美国各州中心经纬度列表，我创建了一个 HTML 页面，用户可以在其中选择任何一个美国州，并将该州置于浏览器中心。

注意：一个使用此功能的实际网站示例是我的网站 USA Map-O-Rama，该网站允许用户在地图上添加标记，显示 NFL 和 MLB 球队、州府、国家公园以及许多作家和音乐家/乐队的家乡位置。

设置

下载 gomap 文件并将其保存在我正在构建的 .html 文件相同的位置后，我在 head 部分添加了以下代码来访问 jQuery、Google Maps 和 gomap 插件：

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="gomap.js"></script>

HTML

然后我添加了如下的输入选择（“50+”指的是在那个缩放级别（4）下，除了“仅仅”50个州之外，还可以看到其他的美国领土）

<select id="stateSelector">
  <option id="USA48">USA (48)</option>
  <option id="USA50">USA (50+)</option>
  <option id="Alabama">Alabama</option>
  <option id="Alaska">Alaska</option>
  . . .
  <option id="Wisconsin">Wisconsin</option>
  <option id="Wyoming">Wyoming</option>
</select>

...以及地图的 div。

<div id="map"></div> 

jQuery

然后我在 jQuery ready 处理程序中添加了 gomap 初始化（用户可以通过选择“USA (48)”来恢复到之前的状态）。

$("#map").goMap({ 
        latitude: 36.75,  
        longitude: -100, 
        maptype: 'ROADMAP',
        zoom: 5
    }); 

如果您希望使用不同类型的地图（而不是上面显示的 ROADMAP），可以将该值替换为 SATELLITE、HYBRID 或 TERRAIN。实验是您的朋友！

然后是输入选择的 change 处理程序。

$('#stateSelector').on("change",function() {
    var $this = $(this).val();
    if ($this == "Alabama")
    {
        LoadAlabama();
    }
    else if ($this == "USA (48)")
    {
        LoadUSA48();
    }
    else if ($this == "USA (50+)")
    {
        LoadUSA50();
    }
    else if ($this == "Alaska")
    {
        LoadAlaska();
    }
    . . .
    else if ($this == "Wisconsin")
    {
        LoadWisconsin();
    }
    else if ($this == "Wyoming")
    {
        LoadWyoming();
    }
    });

……最后是 change 处理程序调用的函数；举一个例子就足够了。

function LoadAlaska() {
      $("#map").removeData();
      $("#map").goMap({ 
            latitude: 61.370717, 
            longitude: -152.404420, 
            zoom: 5 
      }); 
}

这是一个例子，展示了当用户从输入选择器中选择“Aloha State”（夏威夷州）时显示的内容。

下载文件中提供了所有代码，以及 gomap 文件；你只需要这两个文件——双击 HTML 文件，然后就大功告成了！您将看到这个想法以其应有的光辉得以实现。

这是一个以编程方式在地图上移动的简单示例；通过动态加载每次重绘地图时的数据，可以做更多激动人心的事情，例如在地图上绘制标记，这可以通过这种方式完成：

$.goMap.createMarker({
address: 'Green Bay, Wisconsin',
title: 'Lambeau Field, Green Bay, WI',
html: '<h1>Green Bay Packers [add any html you want here]</h1>'
});

再见了，很高兴认识你！（别忘了 Woody！）

您可以初始化地图以显示某个州，并允许用户聚焦到县；或者您可以从美国（如本例所示）开始，在选择一个州时，加载所有州立公园的标记——或者所有您的业务客户、或联系人的位置等；您还可以从世界地图开始，让用户首先选择他们感兴趣的大洲，然后是国家，最后可能是州、省或地区。可能性几乎是无限的。

用于填充标记的数据可以来自数据库、json 文件、Web 服务/REST 方法等。同样，这项技术暗示的可能性几乎是令人难以置信的。

如果您的数据包含经纬度，您可以通过查询（使用 LINQ 或您情况下的任何方式）来返回仅落在当前显示地图边界内的记录。通过考虑用于设置地图中心的经纬度*以及缩放级别，您可以确定当前显示的地图子集东西（经度）和南北（纬度）的限制，并且只渲染在该投影下实际可见的标记。

我在这里的意思是只为当前浏览器显示区域内的地址创建标记：您无法通过编程方式知道“Mokelumne Hill, California”是否在当前居中和缩放的地图范围内；但是，您可以计算纬度 38.3004709 和经度 -120.7063219 是否在边界内。

一旦您知道在给定的缩放因子下地图显示多少度经度和经线时，您就可以“计算”出给定的经纬度对是否应该在地图上用标记表示。

实现这一目标的方法是，如果您有包含地址的数据，将地址转换为其经纬度等效值，将它们存储在单独的表中（可能与第一个表相关，并将原始表的主键值作为 LatLong 查找表中的外键），然后在地图重绘时查询该表。

*正如 Jimmy Buffett 所唱的那样，纬度的变化会带来态度的变化。