当前位置:Gxlcms > JavaScript > 用js闭包的方法实现多点标注冒泡示例_javascript技巧

用js闭包的方法实现多点标注冒泡示例_javascript技巧

时间:2021-07-01 10:21:17 帮助过:15人阅读

这两天在做地图这块,一点点js代码,各种坑。第一次接触js,各种难,下面就这几天的研究做一些总结,求坑
在事件监听器中使用闭包

在执行事件监听器时,通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript 不支持“私有”实例数据,但是支持允许内部函数访问外部变量的闭包。在事件监听器中,闭包非常适用于访问通常不附加到发生事件的对象的变量。

以下示例在事件监听器中使用了函数闭包将加密讯息分配给一组标记。点击每个标记将会看到加密讯息的一部分,该讯息并不包含在标记本身内。
代码如下:

var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

// Add 5 markers to the map at random locations.
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: location,
map: map
});
var j = i + 1;
marker.setTitle(j.toString());
attachSecretMessage(marker, i);
}
}

// The five markers show a secret message when clicked
// but that message is not within the marker's instance data.
function attachSecretMessage(marker, number) {
var message = ["This","is","the","secret","message"];
var infowindow = new google.maps.InfoWindow(
{ content: message[number],
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

这段代码是从google官方里面复制下来的

接下来我要实现从数据库中读取经纬度、地址信息,在google map上进行标注并单击标注出现信息

要实现多点标注,以上代码可以参考
代码如下: