谷歌地图:商店定位器 [英] Google Maps: Store locator
问题描述
我即将开始为一家企业设计商店定位器.我有几个关于最佳路线的问题.主要问题位于粗体.
将有两列，1 列是地图本身，1 列是当前位于地图视图中的所有商店的列表.我希望将要加载的谷歌地图放大到美国地图上，并在其中有商店的州周围使用多边形.多边形不需要动态加载，它们可以从这个列表中手动地理边界
您是否推荐我使用任何函数或方法，只需查看当前在视图中的标记，即可动态确定要在第二列中显示的标记/存储信息?例如，假设美国地图已加载，2 个州上有多边形(密歇根州和弗洛里亚州).每个密歇根州和佛罗里达州的经销商都位于右侧.如果此人单击密歇根州的多边形，则地图将放大位于密歇根州的所有标记，并且仅使用密歇根州标记更新该列.如果客户端再次放大到密歇根州南部，则列上只会显示当前仍在查看的标记.
我的第二个问题是，商店将拥有某些属性"，我希望为地图设置某种过滤系统.假设商店可以分类，如果他们说西班牙语，或者如果他们有维修中心.如果选中只说西班牙语的商店"，那么所有不会说西班牙语的商店都将被卸载(或者它会刷新只有说西班牙语的商店).与 sprint 的网站非常相似:Sprints Store Locator(但是，我正在寻找AJAX 解决方案)更好的 ace 硬件之一:AceHardware Locator 是否有内置方法具有过滤标记匹配的功能，或者您会提出什么方法来做到这一点?
请注意:我想避免使用任何数据库，因为在此站点上的其他任何地方都不需要数据库，并且仅仅为了这个功能而运行 MySQL 似乎是一种浪费.我宁愿避免长时间存放.纬度在一个文件中，但如果需要，我可以这样做.商店不会经常变化，我不需要使用地理定位来获取纬度.长.通过地址.
默认会加载Jquery，所以我想知道是否使用这个插件:http://googlemaps.mayzes.org/ 将被推荐或不推荐.据我了解，他使用谷歌地图 v2，而 v3 更先进，更容易处理.
具有我正在寻求的任何或所有功能的网站的任何示例/链接都会有所帮助.
这里有一个按状态过滤商店的解决方案.您将需要实现语言或其他过滤选项，但一般结构就在那里.基本思想是将所有商店数据保存在一个数组中，如果标记映射不满足过滤条件，则只需将其设置为 null.我对状态名称使用了文本匹配 - 如果您想真正花哨，您可以检查是否在多边形边界中发生了点击.
我使用 jQuery 加载和处理状态 xml 数据(以及显示商店列表)，因此您需要确保将数据存储在与脚本相同的服务器上.
<头><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><脚本>无功地图；var 商店；变量选项 = {当前状态:"}//sample 存储数据 - 标记 Obj 将存储对该存储的地图上标记对象的引用商店 = [{"name": "store1","lat": "37.9069","lng": "-122.0792","state": "加利福尼亚","languages": ["Spanish", "English"],"markerObj": ""}, {"name": "store2","lat": "37.7703","lng": "-122.4212","state": "加利福尼亚",语言":[英语"]，"markerObj": ""}, {"name": "store3","lat": "39.251","lng": "-105.0051","state": "科罗拉多州",markerObj":"}]函数初始化(){var latlng = new google.maps.LatLng(37.9069, -122.0792);var myOptions = {缩放:4，中心:latlng，mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("map"), myOptions);显示状态()；显示商店()；}函数 showStates(){//加载状态边界的 XML 并附加事件$.get("states.xml", function(data){$(data).find("state").each(function(){坐标 = [];state = $(this).attr("name");stateCol = $(this).attr("颜色");$(this).find("point").each(function(){lat = $(this).attr("lat")lng = $(this).attr("lng")coord.push(new google.maps.LatLng(lat, lng));})//绘制状态多边形statePoly = 新的 google.maps.Polygon({路径:坐标，strokeColor: "#000000",中风不透明度:0.8，行程重量:1，填充颜色:stateCol，填充不透明度:0.5});statePoly.setMap(map);//将点击事件附加到多边形addListeners(state, statePoly, coord);//将点击事件附加到poly})})}函数 addListeners(state, poly, coord){google.maps.event.addListener(poly, 'click', function(){//放大到状态级别边界 = 新的 google.maps.LatLngBounds();for (i = 0; i " + stores[i].name + "-" + stores[i].state + "")}}//进行过滤 - 如果您想添加其他过滤选项，则需要扩展它函数 filterStoresByState(state){$(".stores").html("");for (i = 0; i " + stores[i].name + "-" + stores[i].state + "")}}}<body onload="init()"><div id="map" style="width: 600px;height: 400px;"> <div><ul class="stores">
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.
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
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.
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) Edit: 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?
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 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.
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.
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屋！
