Google 地图中的其他选择 api (3)
additional selections in Google maps api (3)
使用 google 地图 API 创建了包含多个标记的地图后,我想进行其他选择以突出显示的标记子集。我想在不返回服务器的情况下执行此操作。我最好将数据存储在标记或数组中。我可以用新标记代替,也可以在标记上叠加图像。任何人都可以提出如何执行此操作的示例 - 特别是关于添加图像或更改标记的部分。
下面的例子...
这是一个示例,它假定当您加载页面时,您已从 JSON 中的服务器返回此数据。
数据=[{
纬度:103.2,
经度:12.3,
isDiscountOutlet:假
}, {
纬度:101.2,
经度:11.3,
isDiscountOutlet:假
}
]
基本方法是我们将该数据存储在浏览器中,并在更改选择时使用它来更新标记的外观。
第 1 部分:创建一个全局变量来存储我们的标记
var storedMarkers;
第 2 部分:使用来自服务器的数据创建地图
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(103, 11)
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Add the markers. We are going to store them in a global array too,
// so we can access them later.
for (var i = 0; i < data.length; ++i) {
// Create one marker for each piece of data.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
map: map
});
// Store that marker, alongside that data.
var dataToStore = {
markerObject: marker,
dataAssociatedWithMarker: data[i]
};
storedMarkers.push(dataToStore);
}
google.maps.event.addDomListener(window, 'load', initialize);
第 3 部分:让我们在有人单击按钮时显示所有折扣店,并隐藏所有其他标记
我假设您有一个 ID 为 'discount' 的 DOM 元素(一个按钮)。我也打算作弊并使用 jQuery :)
$("#discount").click(function () {
for (var i = 0; i < storedMarkers.length; ++i) {
var currentStoredMarker = storedMarkers[i];
// Is this marker a discount outlet?
if (currentStoredMarker.dataAssociatedWithMarker.isDiscountOutlet == true) {
// Let's show it!
currentStoredMarker.markerObject.setVisible(true);
} else {
// Let's hide it!
currentStoredMarker.markerObject.setVisible(false);
}
}
});
使用 google 地图 API 创建了包含多个标记的地图后,我想进行其他选择以突出显示的标记子集。我想在不返回服务器的情况下执行此操作。我最好将数据存储在标记或数组中。我可以用新标记代替,也可以在标记上叠加图像。任何人都可以提出如何执行此操作的示例 - 特别是关于添加图像或更改标记的部分。
下面的例子...
这是一个示例,它假定当您加载页面时,您已从 JSON 中的服务器返回此数据。
数据=[{ 纬度:103.2, 经度:12.3, isDiscountOutlet:假 }, { 纬度:101.2, 经度:11.3, isDiscountOutlet:假 } ]
基本方法是我们将该数据存储在浏览器中,并在更改选择时使用它来更新标记的外观。
第 1 部分:创建一个全局变量来存储我们的标记
var storedMarkers;
第 2 部分:使用来自服务器的数据创建地图
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(103, 11)
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Add the markers. We are going to store them in a global array too,
// so we can access them later.
for (var i = 0; i < data.length; ++i) {
// Create one marker for each piece of data.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
map: map
});
// Store that marker, alongside that data.
var dataToStore = {
markerObject: marker,
dataAssociatedWithMarker: data[i]
};
storedMarkers.push(dataToStore);
}
google.maps.event.addDomListener(window, 'load', initialize);
第 3 部分:让我们在有人单击按钮时显示所有折扣店,并隐藏所有其他标记
我假设您有一个 ID 为 'discount' 的 DOM 元素(一个按钮)。我也打算作弊并使用 jQuery :)
$("#discount").click(function () {
for (var i = 0; i < storedMarkers.length; ++i) {
var currentStoredMarker = storedMarkers[i];
// Is this marker a discount outlet?
if (currentStoredMarker.dataAssociatedWithMarker.isDiscountOutlet == true) {
// Let's show it!
currentStoredMarker.markerObject.setVisible(true);
} else {
// Let's hide it!
currentStoredMarker.markerObject.setVisible(false);
}
}
});