谷歌地图：商店定位器 [英] Google Maps: Store locator
问题描述
我即将开始设计一个商店定位器业务。我有最好的路线上的一些问题采取。主要的问题是位于粗体
I am about to start designing a store locator for a business. I had a few questions on the best route to take. The main questions are located in bold.
将有两列，1地图本身和1目前位于地图的视图中的所有商店的清单。我希望能有谷歌地图加载到放大地图美国周围有商店在他们状态多边形。多边形不需要动态加载，他们可以从该列表中进行人工编辑：<一href=\"http://stackoverflow.com/questions/1814169/geographical-boundaries-of-states-provinces-google-maps-polygon\">Geo边界
There will be two columns, 1 with the map itself and 1 with the list of all stores currently located in the view of the map. I am hoping to have the google map to be loaded zoomed onto a map of the US with polygons around the states that have stores in them. The polygons don't need to be loaded dynamically, they can be manually edited from this list: Geo Boundaries
是否有任何函数或方法，你会建议我用这将动态地找出哪些标志/信息存储在第二列中显示简单地通过看有哪些标记，目前有何看法？例如，可以说，美国的地图加载，2状态是对他们（密歇根州和弗洛里亚）多边形。每个密歇根州和佛罗里达州的经销商位于右侧。如果人点击密歇根多边形，然后将地图缩放在位于密歇根州的所有标记，列仅与密歇根州的标记更新。如果客户端在视图放大再次南部密歇根，仅标记当前仍然显示在柱
Is there any function or method you would recommend I use that would dynamically figure out which marker/store information to display in the 2nd column simply by seeing which markers are currently in view? For example, lets say the USA map is loaded, 2 states are have polygons on them (Michigan and Floria). Every michigan and florida dealer is located on the right side. If the person clicks the polygon of Michigan, then the map is zoomed in on all the markers located in michigan, and the column is updated with only michigan markers. If the client zoomed in again to southern michigan, only the markers still currently in view are displayed on the column.
我的第二个问题是，卖场会有一定的属性，他们说，我希望有某种过滤系统的地图。比方说，商店可能，如果他们在那里维修中心，如果他们speaked西班牙分类或。如果选中标记为pssed $ P $说西班牙语只存储，那么谁也不会说西班牙语将被卸载（或将与只有西班牙语店刷新）所有门店。非常类似于Sprint的网站：<一href=\"http://sprint.findlocation.com/results.aspx?addressline=detroit,%20mi&active=1&salesservices=1,2&services_matchall=true&type_OrExactMatch=COMPANY%20OWNED,EXCLUSIVE%20DEALER,AFFILIATE%20OWNED&selectiontype=checkbox&selectionvalue=Sales&search_param=R10\"相对=nofollow> 冲刺店铺位置 （但是，我要寻找一个Ajax解决方案）编辑：更好的王牌硬件之一：的 Ace五金零售连锁公司定位 有没有建在具有过滤标记匹配此功能的方法，或者你会建议，以此来做到这一点？
My second question, is that the stores will have certain "properties" to them that I wish to have some sort of filtering system for the map. Lets say the stores could be be categorized if they speaked spanish, or if they where a repair center. If the checkmark is pressed for "speak spanish only stores" then all stores who do not speak spanish would be unloaded (or it would refresh with only spanish speaking stores). Very similar to sprint's site: Sprints Store Locator (however, I am looking for a AJAX solution) better yet the ace hardware one: AceHardware Locator Is there a built in method that has this functionality of filtering marker matches, or what would you propose as a way to do this?
请注意：我想避免使用任何数据库仅仅是因为没有必要的数据库其他地方在这个网站，它似乎浪费运行MySQL只是为这一功能。我想preFER避免存放长。纬度。在文件中，但我可以根据需要这么做。该商店将不会经常改变，我也不需要用大地定位来获得纬度。长。通过地址。
Please note: I would like to avoid the use of any databases simply because there is no need for a database anywhere else on this site and it would seem wasteful to run MySQL simply for this functionality. I would prefer avoiding storing long. lat. in a file, but I can do so if needed. The stores will not change often and I do not need to use GeoLocating to get Lat. Long. via addresses.
jQuery将默认所以我想知道被加载，如果使用这个插件： 的http：// GOOGLEMAPS .mayzes.org / 将建议与否。这是我的理解是，他使用谷歌地图V2和V3那是更先进，更容易处理。
Jquery will be loaded by default so I am wondering if the use of this plugin: http://googlemaps.mayzes.org/ would be recommended or not. It's my understanding that he uses google maps v2 and that v3 is much more advanced and easier to deal with.
这有我正在寻求将是有益的任何或全部功能的网站的任何例子/链接。
Any examples/links of sites that have any or all functionality I am seeking would be helpful.
推荐答案
下面是由国家过滤存储解决方案。您将需要实现语言或其他过滤选项，但一般结构是存在的。其基本思想是，你把你所有的数据存储在一个数组，并简单地设置标记映射为null，如果他们不符合过滤条件。我用的文本匹配的状态的名字 - 如果你想成为真正看中的，你可以实现一个检查，如果点击多边形的边界，而不是发生。
Here is a solution for filtering stores by state. You will need to implement language or other filtering options but the general structure is there. The basic idea is that you keep all your store data in an array and simply set markers map to null if they do not meet filtering criteria. I used text matching for state name - if you want to be really fancy you can implement a check if a click happened in polygon boundaries instead.
我用jQuery来加载和处理状态XML数据（以及显示Store列表），所以你需要确保你有存储在同一台服务器上的脚本上的数据。
I used jQuery to load and process the state xml data (as well as display the store list), so you will need to make sure that you have data stored on the same server as your script.
<html>
<head>
<script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script>
var map;
var stores;
var options = {
currState: ""
}
//sample stores data - marker Obj will store reference to marker object on the map for that store
stores = [{
"name": "store1",
"lat": "37.9069",
"lng": "-122.0792",
"state": "California",
"languages": ["Spanish", "English"],
"markerObj": ""
}, {
"name": "store2",
"lat": "37.7703",
"lng": "-122.4212",
"state": "California",
"languages": ["English"],
"markerObj": ""
}, {
"name": "store3",
"lat": "39.251",
"lng": "-105.0051",
"state": "Colorado",
"markerObj": ""
}]
function init(){
var latlng = new google.maps.LatLng(37.9069, -122.0792);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
showStates();
showStores();
}
function showStates(){
//load the XML for state boundaries and attach events
$.get("states.xml", function(data){
$(data).find("state").each(function(){
coord = [];
state = $(this).attr("name");
stateCol = $(this).attr("colour");
$(this).find("point").each(function(){
lat = $(this).attr("lat")
lng = $(this).attr("lng")
coord.push(new google.maps.LatLng(lat, lng));
})
//draw state poly
statePoly = new google.maps.Polygon({
paths: coord,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: stateCol,
fillOpacity: 0.5
});
statePoly.setMap(map);
//attach click events to a poly
addListeners(state, statePoly, coord);
//attach click events to poly
})
})
}
function addListeners(state, poly, coord){
google.maps.event.addListener(poly, 'click', function(){
//zoom in to state level
bounds = new google.maps.LatLngBounds();
for (i = 0; i < coord.length; i++) {
bounds.extend(coord[i])
}
map.fitBounds(bounds);
//do store display and filtering
filterStoresByState(state);
});
}
function showStores(){
for (i = 0; i < stores.length; i++) {
var myLatlng = new google.maps.LatLng(stores[i].lat, stores[i].lng);
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
//store the marker object for later use
stores[i].markerObj = marker;
//generate a list of stores
$(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>")
}
}
//do the filtering - you will need to expand this if you want add additional filtering options
function filterStoresByState(state){
$(".stores").html("");
for (i = 0; i < stores.length; i++) {
if (stores[i].state != state) {
(stores[i].markerObj).setMap(null);
}
else {
(stores[i].markerObj).setMap(map)
$(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>")
}
}
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px;height: 400px;">
</div>
<div>
<ul class="stores">
</ul>
</div>
</body>
这篇关于谷歌地图：商店定位器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
