多个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 有点帮助。