可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I need some help in creating an array of markers in Google Map so that it can be more efficient, instead of create a marker one by one. I tried the following but it doesn't work. Anyone have advice?
//create array to store a set of location var collection = new Array(); //a set of locations stored in array collection[0] = new google.maps.LatLng(13.742167701649997, 100.50721049308777); collection[1] = new google.maps.LatLng(13.74428, 100.5404525); collection[2] = new google.maps.LatLng(13.744108, 100.543098); var pointMarkerImage = new Array();//store image of marker in array var pointMarker = new Array();//store marker in array //create number of markers based on collection.length function setPoint(){ for(var i=0; i<collection.length; i++){ var pointMarkerImage[i] = new google.maps.MarkerImage('marker.png'); var pointMarker[i] = new google.maps.Marker({ position: collection[i], map: map, icon: pointMarkerImage[i], animation: google.maps.Animation.BOUNCE, title: "collection"+ i }); google.maps.event.addListener(pointMarker[i], 'click', function() { window.open("blog/page01.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes") }; ); } }
回答1:
This is my simple code and it works fine. When you click on marker, it will open the Info Window respectively based on that marker's location.
<script> var locations = [ ['Title A', 3.180967,101.715546, 1], ['Title B', 3.200848,101.616669, 2], ['Title C', 3.147372,101.597443, 3], ['Title D', 3.19125,101.710052, 4] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: new google.maps.LatLng(3.171368,101.653404), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow; var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } </script> <div data-role="page" id="map_result"> <div data-role="header" data-position="fixed"><h1>Multiple Marker</h1></div> <div data-role="content" style="padding:0;"> <div id="map"></div> </div> </div>
回答2:
I see a few things:
1) in the for loop, var pointM... should just be pointM... adding the var makes it ignore the set you have outside the for loop.
2) you have a ; after a function that is breaking things.
Try this:
//create array to store a set of location var collection = new Array(); //a set of locations stored in array collection[0] = new google.maps.LatLng(13.742167701649997, 100.50721049308777); collection[1] = new google.maps.LatLng(13.74428, 100.5404525); collection[2] = new google.maps.LatLng(13.744108, 100.543098); var pointMarkerImage = new Array();//store image of marker in array var pointMarker = new Array();//store marker in array //create number of markers based on collection.length function setPoint(){ for(var i=0; i<collection.length; i++){ pointMarkerImage[i] = new google.maps.MarkerImage('marker.png'); pointMarker[i] = new google.maps.Marker({ position: collection[i], map: map, icon: pointMarkerImage[i], animation: google.maps.Animation.BOUNCE, title: "collection"+ i }); google.maps.event.addListener(pointMarker[i], 'click', function(){ window.open("blog/page01.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes"); } ); } }
