多个Market共用一个InfoWindow

        最近一个项目是关于GIS（geographical information system ）的，学习了一下GoogleMap，过程中碰到不少问题。

       首先：GoogleMap API地址： https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN 去里面看下Demo、API，申请一个Key就可以进行GoogleMap的开发了。

       今天看一下第一个问题：多个Market共用一个InfoWindow

       先看一下最开始的代码：

var points = [{ Longitude: 110.993487, Latitude: 37.997283 }, { Longitude: 112.769617, Latitude: 38.768677 }, { Longitude: 116.913983, Latitude: 26.944184 },
{ Longitude: 102.360533, Latitude: 38.130595 }, { Longitude: 114.552137, Latitude: 35.675677 }, { Longitude: 112.320119, Latitude: 37.371388 },
{ Longitude: 101.360533, Latitude: 38.130595 }, { Longitude: 104.552137, Latitude: 35.675677 }, { Longitude: 111.320119, Latitude: 37.371388}];
var map;
var markers = [];
var infowindow = new google.maps.InfoWindow({
maxWidth: 240
});
function initialize() {
markers = [];
var myLatlng0 = new google.maps.LatLng(points[0].Latitude, points[0].Longitude);
var mapOptions = {
zoom: 4,
center: myLatlng0,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i = 0; i < points.length; i++) {
var myLatlng = new google.maps.LatLng(points[i].Latitude, points[i].Longitude);
var marker0 = new google.maps.Marker({
position: myLatlng,
map: map,
title: i.toString()
});
google.maps.event.addListener(marker0, 'click', function () {
infowindow.setContent(marker0.getTitle());
infowindow.open(map, marker0);
});
}
}

运行代码，会发现Market都显示出来了，但是click事件却有个问题，就是不管点哪一个Market，InfoWindow都会显示在最后一个Market上面，且显示的内容都是最后一个Market的。

      刚好最近正在看《JavaScript高级程序设计(第2版)》，



好象《JavaScript高级程序设计(第3版)》也出来了。

     仔细检查代码，我分析的原因是：JavaScript 变量的作用域是在 function 内，for  { }  里面定义的变量在  for  { }  以外 function 以内都是可以访问的，包括变量 i 。上面代码 for 循环里定义的变量 marker0 每循环一次只是将变量 marker0 指针的重新指向新创建的对象上，而内存栈里面其实只保存了一个变量 marker0 。



以后写 JavaScript 函数时 第一件事应该就是定义该函数要用到的所有变量。

      于是，将代码改成为

function initialize() {

var marker0;
markers = [];
var myLatlng0 = new google.maps.LatLng(points[0].Latitude, points[0].Longitude);
var mapOptions = {
zoom: 4,
center: myLatlng0,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i = 0; i < points.length; i++) {
myLatlng0 = new google.maps.LatLng(points[i].Latitude, points[i].Longitude);
marker0 = new google.maps.Marker({
position: myLatlng0,
map: map,
title: i.toString()
});
google.maps.event.addListener(marker0, 'click', function () {
showInfoWindow(marker0);
});
}
}
function showInfoWindow(marker0) {
infowindow.setContent(marker0.getTitle());
infowindow.open(map, marker0);
}

修改后，再运行代码，发现 bug 依旧。继续修改代码为如下就OK了：

for (var i = 0; i < points.length; i++) {
myLatlng0 = new google.maps.LatLng(points[i].Latitude, points[i].Longitude);
marker0 = new google.maps.Marker({
position: myLatlng0,
map: map,
title: i.toString()
});
attachEvent(marker0);
}

function attachEvent(marker0) {
google.maps.event.addListener(marker0, 'click', function () {
showInfoWindow(marker0);
});
}

最终，我的代码修改成这样的了

function initialize1() {
markers = [];
var myLatlng0 = new google.maps.LatLng(points[0].Latitude, points[0].Longitude);
var mapOptions = {
zoom: 4,
center: myLatlng0,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i = 0; i < points.length; i++) {
createMarker(i);
}
}
function createMarker(i) {
var myLatlng = new google.maps.LatLng(points[i].Latitude, points[i].Longitude);
var marker0 = new google.maps.Marker({
position: myLatlng,
map: map,
title: i.toString()
});
google.maps.event.addListener(marker0, 'click', function () {
showInfoWindow(marker0);
});
}

最后借用书里面的例子说一下 JavaScript 里面参数的传递，先看一下的代码，会弹出什么呢？

        function setName(localPerson) {
            localPerson.name = "g_cheng";
            localPerson = new Object();
            localPerson.name = "the.Cheng";
        }
        var globalPerson = new Object();
        setName(globalPerson);
        alert(globalPerson.name);

JavaScript 里面函数的参数都是按值类型进行传递的。引用类型传递的只是一个指针。程序运行到 setName 时，setName 作用域内变量 localPerson 指向的是全局变量 globalPerson 指向的堆中的一个对象，localPerson、globalPerson 指向的是同一个对象，所以执行

            localPerson.name = "g_cheng";

会为堆中的对象添加一个 name 的属性，当执行

            localPerson = new Object();
            localPerson.name = "the.Cheng";

只是把 localPerson 指向了新建的对象上，此时 localPerson、globalPerson 分别指向各自的对象。

        啰啰嗦嗦写了这么多，感觉也没什么，只是希望对碰到同类问题的 guys 有点帮助。

$(".MathJax").remove();