今天,我试图让使用谷歌地图的API商店定位器。 商店定位器被设置像这样:两个区域,一个与包含在一个给定的区域(从中心点以可选择的半径处测量)中的所有商店的地图,并且与对所有的存储的列表中的一个区域地图,他们的信息,当然还有他们的网站的链接。 当一个人点击商店名单上的商店的名字,它在中心在地图上的商店,并打开商店标记上信息窗口。
我有一个JavaScript变量,而我已经不厌其烦地分配从PHP脚本一些JSON数据(从数据库中选择在运行这个数据)
locations = [{"siteurl":"http:\/\/localhost.localdomain\/5","address":"260 Test St","city":"Brooklyn","state":"New York","zip_code":"11206"},{"siteurl":"http:\/\/localhost.localdomain\/4","address":"3709 Testing St.","city":"Austin","state":"Texas","zip_code":"78705"}];
现在,我知道有5个不同的功能我需要运行,用自己明显的使用如下:
-
geocoder.getLocations
:用于地址数据(来自JSON对象)转换成纬度和经度数据对象 -
addElementToList
:用于地址信息添加到存储列表,并结合centerOnStore
功能的onclick -
centerOnStore
当点击列表中的地区商店列表项,此功能中心时已被点击的地图区域的商店。 该功能也打开上述集中到商店信息窗口。 -
placeMarker
放置在地图上的标记,调用一次地理编码器的函数返回latitudeLongitude对象 -
eventListener
,这是在列表项的点击莫名其妙绑起来,它的被讨论的存储器还定心地图
好吧,我是我配不上它会出现。 我刚才了解JavaScript的关闭,我想这可能是必要的,但我不能完全理解他们。 我需要找出一些办法让所有这些功能集成到一个正常工作,传递信息来回对方,并创建一个商店定位器
。
以下是我这么远,但也有一些是非常不妥的地方。
var map = null;
var geocoder = null;
var locations = null;
var center_on = null;
var zoom_level = null;
var markerList = [];
function initialize()
{
if(GBrowserIsCompatible())
{
// Assign vars
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
locations = <?php echo(json_encode($my_vars['locations'])); ?>;
center_on = "<?php echo($my_vars['center_on']); ?>";
zoom_level = <?php echo($my_vars['zoom_level']); ?>;
var currentLocation = 0;
geocoder.getLatLng(center_on, function(myPoint)
{
map.setCenter(myPoint, zoom_level);
});
map.setUIToDefault();
var list = document.getElementById('center_list');
for(var i = 0; i < locations.length; i++)
{
var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
geocoder.getLocations(address, addAddressToMap);
}
}
function addAddressToMap(response) {
if (!response || response.Status.code != 200) {
currentLocation++;
} else {
var place = response.Placemark[0];
var point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
GEvent.addListener(marker, 'click', function(){
this.openInfoWindowHtml("<strong>" + place.address + "</strong><br /><a href='" + locations[currentLocation]['siteurl'] + "'>" + locations[currentLocation]['siteurl'] + "</a>");
});
map.setCenter(point, 13);
markerList.push(marker);
map.addOverlay(marker);
li = document.createElement('li');
li.innerHTML = "<strong>" + place.address + "</strong>";
li.setAttribute('onclick', 'center_on_center(' + place.Point.coordinates[1] + ',' + place.Point.coordinates[0] + ')');
li.setAttribute('id', 'center_');
li.style.fontSize = '1.4em';
document.getElementById('center_list').appendChild(li);
// alert(currentLocation) here says 0,0,0,0
currentLocation++;
// alert(currentLocation) here says 1,2,3,4
}
}
}
我对代码的墙遗憾。 我想不出了。 我不知道这将是非常困难。 没有主意。
如果我行提醒currentLocation之前,我增加它,它始终为0,但如果我提醒它在该行后,我增加了,这是“1,2,3,4”等,这违背了我所知道的一切的计算机。