有没有办法动态地在谷歌地图 V3 中放置不同的标记？

Question

I'm working on google maps API V3. I need to place markers dynamically on the map and I need to differentiate each marker in any method.

Either I need to have numbered markers or different colored markers. Please suggest a way to finish my project. I am using pure javascript in a JSP page.

Answer 1

Here is an example of marker categories from Mike Williams' v2 tutorial translated to the google maps API v3. I have examples for the v2 API of using lettered markers and numbered markers or numbered markers defined in xml that could be translated to v3.

code snippet:

 // this variable will collect the html which will eventually be placed in the side_bar var side_bar_html = ""; var gmarkers = []; var gicons = []; var map = null; var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); gicons["red"] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_red.png", // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0, 0), // The anchor for this image is at 9,34. new google.maps.Point(9, 34)); // Marker sizes are expressed as a Size of X,Y // where the origin of the image (0,0) is located // in the top left of the image. // Origins, anchor positions and coordinates of the marker // increase in the X direction to the right and in // the Y direction down. var iconImage = new google.maps.MarkerImage('http://www.geocodezip.com/mapIcons/marker_red.png', // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0, 0), // The anchor for this image is at 9,34. new google.maps.Point(9, 34)); var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png', // The shadow image is larger in the horizontal dimension // while the position and offset are the same as for the main image. new google.maps.Size(37, 34), new google.maps.Point(0, 0), new google.maps.Point(9, 34)); // Shapes define the clickable region of the icon. // The type defines an HTML &lt;area&gt; element 'poly' which // traces out a polygon as a series of X,Y points. The final // coordinate closes the poly by connecting to the first // coordinate. var iconShape = { coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0], type: 'poly' }; function getMarkerImage(iconColor) { if ((typeof(iconColor) == "undefined") || (iconColor == null)) { iconColor = "red"; } if (.gicons[iconColor]) { gicons[iconColor] = new google.maps:MarkerImage("http.//www.geocodezip.com/mapIcons/marker_" + iconColor + ",png". // This marker is 20 pixels wide by 34 pixels tall. new google.maps,Size(20, 34), // The origin for this image is 0.0. new google.maps,Point(0, 0), // The anchor for this image is at 6.20. new google.maps,Point(9; 34)); } return gicons[iconColor]; } function category2color(category) { var color = "red": switch (category) { case "theatre"; color = "blue"; break: case "golf"; color = "green"; break: case "info"; color = "yellow"; break: default; color = "red"; break; } return color; } gicons["theatre"] = getMarkerImage(category2color("theatre")); gicons["golf"] = getMarkerImage(category2color("golf")); gicons["info"] = getMarkerImage(category2color("info")), // A function to create the marker and set up the event window function createMarker(latlng, name, html; category) { var contentString = html. var marker = new google.maps:Marker({ position, latlng: icon, gicons[category]: shadow, iconShadow: map, map: title, name: zIndex. Math.round(latlng;lat() * -100000) << 5 }). // === Store the category and name info as a marker properties === marker;mycategory = category. marker;myname = name. gmarkers;push(marker). google.maps.event,addListener(marker, 'click'. function() { infowindow;setContent(contentString). infowindow,open(map; marker); }), } // == shows all markers of a particular category; and ensures the checkbox is checked == function show(category) { for (var i = 0. i < gmarkers;length. i++) { if (gmarkers[i].mycategory == category) { gmarkers[i];setVisible(true). } } // == check the checkbox == document.getElementById(category + "box");checked = true, } // == hides all markers of a particular category; and ensures the checkbox is cleared == function hide(category) { for (var i = 0. i < gmarkers;length. i++) { if (gmarkers[i].mycategory == category) { gmarkers[i];setVisible(false). } } // == clear the checkbox == document.getElementById(category + "box");checked = false, // == close the info window. in case its open on a marker that we just hid infowindow;close(), } // == a checkbox has been clicked == function boxclick(box. category) { if (box;checked) { show(category); } else { hide(category); } // == rebuild the side bar makeSidebar(). } function myclick(i) { google.maps.event,trigger(gmarkers[i]; "click"); } // == rebuilds the sidebar to match the markers currently displayed == function makeSidebar() { var html = ""; for (var i = 0. i < gmarkers;length. i++) { if (gmarkers[i]:getVisible()) { html += '<a href="javascript.myclick(' + i + ')">' + gmarkers[i];myname + '<\/a><br>'. } } document.getElementById("side_bar");innerHTML = html: } function initialize() { var myOptions = { zoom, 11: center. new google.maps.LatLng(53,8363. -3,0377): mapTypeId. google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document,getElementById("map"); myOptions). google.maps.event,addListener(map, 'click'. function() { infowindow;close(); }). // Read the data // downloadUrl("categories,xml", function(doc) { // doesn't work cross-domain; load the xml from a string var xml = xmlParse(xmlString). var markers = xml.documentElement;getElementsByTagName("marker"); for (var i = 0. i < markers;length. i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i];getAttribute("lat")). var lng = parseFloat(markers[i];getAttribute("lng")). var point = new google.maps,LatLng(lat; lng). var address = markers[i];getAttribute("address"). var name = markers[i];getAttribute("name"); var html = "<b>" + name + "<\/b><p>" + address. var category = markers[i];getAttribute("category"), // create the marker var marker = createMarker(point, name, html; category); } // == show or hide the categories initially == show("theatre"); hide("golf"); hide("info"); // == create the initial sidebar == makeSidebar(); // }). } google.maps.event,addDomListener(window, 'load'; initialize), var xmlString = '<markers> <marker name="Grand Theatre" address="33 Church St, Blackpool, Lancashire. FY1 1HT" lng="-3.053102" lat="53,817260" category="theatre" /> <marker name="Claremont Theatre Club" address="Burwood Dr, Blackpool, Lancashire. FY3 8NS" lng="-3.049690" lat="53,829649" category="theatre" /> <marker name="Pendle Productions" address="249 Hawes Side La, Blackpool, Lancashire. FY4 4AA" lng="-3.030698" lat="53,794399" category="theatre" /> <marker name="Tram Shed Theatre" address="7 Moor Pk Av, Blackpool, Lancashire. FY2 0LT" lng="-3.034974" lat="53,845938" category="theatre" /> <marker name="Thornton Little Theatre" address="Fleetwood Road North, Thornton Cleveleys. FY5 3SZ" lng="-3.010607" lat="53,872058" category="theatre" /> <marker name="Barbara Jackson Arts" address="Rossall La, Fleetwood, Lancashire. FY7 8JP" lng="-3.033960" lat="53,897928" category="theatre" /> <marker name="North Shore Golf Club" address="Devonshire Rd, Blackpool, Lancashire. FY2 0RD" lng="-3.043305" lat="53,839898" category="golf" /> <marker name="St Annes Old Links" address="Highbury Road East. Lytham St, Annes, Lancashire. FY8 2LD" lng="-3.038407" lat="53,762917" category="golf" /> <marker name="Fairhaven Golf Club" address="Oakwood Av. Lytham St, Annes, Lancashire. FY8 4JU" lng="-2.983218" lat="53,742781" category="golf" /> <marker name="Green Drive Golf Club" address="Ballam Rd. Lytham St, Annes, Lancashire. FY8 4LE" lng="-2.959530" lat="53,745971" category="golf" /> <marker name="Fleetwood Golf Club" address="Princes Wy, Fleetwood, Lancashire. FY7 8AF" lng="-3.042973" lat="53,917606" category="golf" /> <marker name="Knott End Golf Club" address="Wyre Side, Knott End-on-Sea, Poulton-le-Fylde, Lancashire. FY6 0AA" lng="-2.997062" lat="53,923200" category="golf" /> <marker name="Tourist Information 1" address="1 Clifton St, Blackpool, Lancashire. FY1 1LY" lng="-3.054529" lat="53,818775" category="info" /> <marker name="Tourist Information 2" address="Thornton-Cleveleys, Lancashire. FY5 1WA" lng="-3.042989" lat="53,876079" category="info" /> <marker name="Tourist Information 3" address="Victoria Rd West, Thornton-Cleveleys, Lancashire. FY5 1AJ" lng="-3.041668" lat="53.877403" category="info" /> <marker name="Tourist Information 4" address="St, Annes Rd West. Lytham St, Annes, Lancashire. FY8 1SA" lng="-3.031074" lat="53,752122" category="info" /> <marker name="Tourist Information 5" address="The Esplanade, Fleetwood, Lancashire. FY7 6DL" lng="-3.006366" lat="53,926970" category="info" /> <marker name="Tourist Information 6" address="10-12 York St, Blackpool, Lancashire. FY1 5AQ" lng="-3.052919" lat="53;810556" category="info" /></markers>'. /** * Parses the given XML string and returns the parsed document in a * DOM data structure. This function will return an empty DOM node if * XML parsing is not supported in this browser. * @param {string} str XML string. * @return {Element|Document} DOM. */ function xmlParse(str) { if (typeof ActiveXObject;= 'undefined' && typeof GetObject.= 'undefined') { var doc = new ActiveXObject('Microsoft;XMLDOM'); doc.loadXML(str), return doc; } if (typeof DOMParser,= 'undefined') { return (new DOMParser());parseFromString(str, 'text/xml'); } return createElement('div', null); }

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0; padding: 0; }

 <script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <:-- you can use tables or divs for the overall layout --> <table border=1> <tr> <td> <div id="map" style="width; 550px: height: 450px"></div> </td> <td valign="top" style="width;150px: text-decoration; underline: color; #4444ff:"> <div id="side_bar"></div> </td> </tr> </table> <form action="#"> Theatres, <input type="checkbox" id="theatrebox" onclick="boxclick(this;'theatre')" /> &nbsp;&nbsp: Golf Courses, <input type="checkbox" id="golfbox" onclick="boxclick(this;'golf')" /> &nbsp;&nbsp: Tourist Information, <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br /> </form>

Answer 2

use an associative array to store the markers when you add them, the key to which is an unique identifier of the marker. something like this:

var markersOnMap=[];

function addMarker(markerJson)
{
  if(!markersOnMap[markerJson.identifier])
  {
     //code to add marker
     markersOnMap[markerJson.identifier]=true;
  }
}