Добавить пользовательский образ (или цвет маркера) в маркеры (с помощью markerCluster)

-1

Может кто-нибудь, пожалуйста, помогите мне связать пользовательский маркер изображения с этим скриптом?Добавить пользовательский образ (или цвет маркера) в маркеры (с помощью markerCluster)

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
<script type="text/javascript" src="scripts/downloadxml.js"></script> 
<style type="text/css"> 
html, body { height: 100%; } 
</style> 
<script type="text/javascript"> 
//<![CDATA[ 
    // this variable will collect the html which will eventually be placed in the side_bar 
    var side_bar_html = ""; 

    // arrays to hold copies of the markers and html used by the side_bar 
    // because the function closure trick doesnt work there 
    var gmarkers = []; 

// global "map" variable 
    var map = null; 
    var markerclusterer = null; 

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) { 
var contentString = html; 
var marker = new google.maps.Marker({ 
    position: latlng, 
    // map: map, 
    zIndex: Math.round(latlng.lat()*-100000)<<5 
    }); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map,marker); 
    }); 
// save the info we need to use later for the side_bar 
gmarkers.push(marker); 
// add a line to the side_bar html 
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; 
} 

// This function picks up the click and opens the corresponding info window 
function myclick(i) { 
google.maps.event.trigger(gmarkers[i], "click"); 
} 

function initialize() { 
// create the map 
var myOptions = { 
zoom: 7, 
center: new google.maps.LatLng(52.13263,5.29127), 
mapTypeControl: true, 
mapTypeControlOptions: {style:  google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
navigationControl: true, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
map = new google.maps.Map(document.getElementById("map_canvas"), 
          myOptions); 



google.maps.event.addListener(map, 'click', function() { 
    infowindow.close(); 
    }); 
    // Read the data from example.xml 
    downloadUrl("dataxml.cfm", function(doc) { 
    var xmlDoc = xmlParse(doc); 
    var markers = xmlDoc.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 marker_image = parseFloat(markers[i].getAttribute("markerimage")); 
     var image = { 
      url: marker_image, 
      size: new google.maps.Size(71, 132), 
      origin: new google.maps.Point(0, 0), 
      scaledSize: new google.maps.Size(71, 132) 
     }; 
     var point = new google.maps.LatLng(lat,lng); 
     var id = markers[i].getAttribute("id"); 
     var country = markers[i].getAttribute("country"); 
     var html="<b>"+country+"</b><br><span style='color:white'>"+id+"</span>"; 
     // create the marker 
     var marker = createMarker(point,country+" "+id,html); 
    } 
    markerCluster = new MarkerClusterer(map, gmarkers); 
    }); 
} 

var infowindow = new google.maps.InfoWindow(
{ 
    size: new google.maps.Size(150,50) 
}); 



// This Javascript is based on code provided by the 
// Community Church Javascript Team 
// http://www.bisphamchurch.org.uk/ 
// http://econym.org.uk/gmap/ 
// from the v2 tutorial page at: 
// http://econym.org.uk/gmap/basic3.htm 
//]]> 
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div id="map_canvas" style="width: 752px; height: 600px"></div> 
</body> 
</html>

XML-прост:

<markers> 
<marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="value" lat="value" lng="value" country="value" />

Я пытался добавить "значок: изображение" в создании маркера части, но я не могу вычислял его out.I есть попытался добавить «значок: изображение» в сторону маркера создания, но я не могу понять.

источник

2016-03-05 Samall

Почему вы называете 'parseFloat' на веревочке? – geocodezip

Просьба представить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. 'Uncaught ReferenceError: createMarker не определен' – geocodezip

Я редактировал вопрос и добавлял полный скрипт. – Samall

Вам необходимо пройти пользовательский значок в createMarker функции:

// create the marker 
var marker = createMarker(point, country + " " + id, html, marker_image);

обновленный createMarker функция:

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, icon) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
    position: latlng, 
    icon: icon, 
    // map: map, 
    zIndex: Math.round(latlng.lat() * -100000) << 5 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, marker); 
    }); 
    // save the info we need to use later for the side_bar 
    gmarkers.push(marker); 
    // add a line to the side_bar html 
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>'; 
}

proof of concept fiddle

фрагмент кода:

function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(40.735657, -74.1723667), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    }); 
 
    // Read the data from dataxml.cfm 
 
    // downloadUrl("dataxml.cfm", function(doc) { 
 
    var xmlDoc = xmlParse(xmlData); 
 
    var markers = xmlDoc.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 marker_image = markers[i].getAttribute("markerimage"); 
 
    var image = { 
 
     url: marker_image, 
 
     size: new google.maps.Size(71, 132), 
 
     origin: new google.maps.Point(0, 0), 
 
     scaledSize: new google.maps.Size(71, 132) 
 
    }; 
 
    var point = new google.maps.LatLng(lat, lng); 
 
    var id = markers[i].getAttribute("id"); 
 
    var country = markers[i].getAttribute("country"); 
 
    var html = "<b>" + country + "</b><br><span style='color:blue'>" + id + "</span>"; 
 
    // create the marker 
 
    var marker = createMarker(point, country + " " + id, html, marker_image); 
 
    } 
 
    markerCluster = new MarkerClusterer(map, gmarkers); 
 
    // }); 
 
} 
 
var infowindow = new google.maps.InfoWindow({ 
 
    size: new google.maps.Size(150, 50) 
 
}); 
 
// A function to create the marker and set up the event window function 
 
function createMarker(latlng, name, html, icon) { 
 
    var contentString = html; 
 
    var marker = new google.maps.Marker({ 
 
    position: latlng, 
 
    icon: icon, 
 
    zIndex: Math.round(latlng.lat() * -100000) << 5 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.setContent(contentString); 
 
    infowindow.open(map, marker); 
 
    }); 
 
    // save the info we need to use later for the side_bar 
 
    gmarkers.push(marker); 
 
    // add a line to the side_bar html 
 
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>'; 
 
} 
 

 
// global variables 
 
var side_bar_html = ""; 
 
var gmarkers = []; 
 
var map = null; 
 
var markerclusterer = null; 
 

 
// This function picks up the click and opens the corresponding info window 
 
function myclick(i) { 
 
    google.maps.event.trigger(gmarkers[i], "click"); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
//New York, NY, USA (40.7127837, -74.0059413 
 
//Newark, NJ, USA (40.735657, -74.1723667) 
 
var xmlData = '<markers><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NYC" lat="40.7127837" lng="-74.0059413" country="USA" /><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NWK" lat="40.735657" lng="-74.1723667" country="USA" /></markers>'; 
 

 
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: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
 
<div id="map_canvas"></div>

источник

2016-03-05 20:39:02 geocodezip

Добавить пользовательский образ (или цвет маркера) в маркеры (с помощью markerCluster)

ответ

Смежные вопросы