允许用户使用 goMap jQuery插头放大Google地图的任何区域

分享于 

6分钟阅读

Web开发

  繁體

介绍

谷歌地图 很棒。让开发者更容易使用它们是jQuery插件插件的。

这两个国家都可以创建一个HTML页面,并在浏览器中居中显示该状态,从而使用户可以选择任何 50个 美国 状态。

注意:web站点使用这一功能的实况网站是我的站点美国Map-O-Rama插件,允许用户填写地图,其中包括 NFL NFL,State,National和音乐家/音乐家/乐队的hometowns。

设置

我在goMap文件中下载了文件并将它的保存到 。html文件之后,我将这里代码添加到部分以访问 jQuery,谷歌地图 以及goMap插件:

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

HTML

然后,我添加了像("50+"是指在缩放级别( 4 ) ) 这样的输入选择,它的他 美国 区域除了"只是只是" 50状态外还可以看到:

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

。地图的div:

<divid="map"></div>

jQuery

然后我添加了goMap初始化 inside ( jQuery处理程序( 用户可以通过选择将它的还原为"美国( 48 ) ):

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

如果希望使用不同类型的映射( 除了 ROADMAP 之外,上面显示),则可以用 SATELLITEHYBRID 或者 TERRAIN 替换该值。 实验是你的朋友 !

然后,输入选择的更改处理程序:

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

。最后由更改处理程序调用的函数;一个示例应该足够了:

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

下面是一个示例,显示当用户从输入选择器选择Aloha状态时显示的内容:

所有代码都在文件中提供,以及goMap文件,这两个文件都是你需要的。 你会看到这个想法在它所有的假设荣耀中实现。

这是以编程方式移动地图的简单示例,可以通过动态加载数据来完成更多操作。

$.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方法。等等。这一技术暗示的可能性几乎都是通过boggling来实现的。

如果数据包含纬度和经度,可以查询(。通过LINQ或者你的环境中的任何工作) 以返回当前显示的地图边界内的那些记录。 如果你要考虑当前显示的世界地图子集,你可以确定当前显示的world/west和 north/south ( 纬度) 极限,并只渲染实际显示的标记。

下面是仅为当前在浏览器显示的区域内的地址创建标记的内容: 如果"加州 mokelumne Hill"当前处于居中和缩放范围内,你不能以编程方式了解它;但是,可以计算 -120.7063219的38.300 4709和经度是否位于边界范围内。

一旦知道给定缩放因子显示的经度和纬度的多少度,就可以在地图上显示给定长/lat对是否在地图上显示,并带有标记。

实现这种情况的方法是在数据中包含地址,将地址转换为纬度/长等效项,然后将它的存储在单独的表( 与第一个相关,也许在LatLong查找表中,表 key-value的原始主表是外键) 中,然后在重新绘制表时查询该表。

就像Jimmy所唱的,纬度变化会带来态度的改变。


USE  用户  users  ZOO  区域  gom  
相关文章