Question

我正在努力实现与以下类似的效果： http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_stylemap_marker.html?filename=http://www.geocodezip.com/geoxml3_test/rollover_kml.xml

然而，这使用了许多我不知道如何使用的东西，例如： KML和geoxml3。

我只在使用Google maps api 3寻找类似的效果。我一直在看以下内容，但是我似乎无法达到效果：

http://jsfiddle.net/mD9z3/

我的代码如下（我删除了我试图实现效果的所有内容，我知道的代码有效 - 没有效果）

// JavaScript Document

var image_url = 'http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png';

var image_url_hover = 'http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker2.png';

$(document).ready(function() {

var markers = [
    ['Frederiksberg generelt, Frederiksberg', 55.677366, 12.512767],
    ['ZOO parkeringsplads og langs Roskildevej, Frederiksberg', 55.671815, 12.523510],
    ['Solbjerg Plads, bag ved CBS og Frederiksberg Centret, Frederiksberg', 55.681718, 12.530988],
    ['Refshalevej tæt på Christianshavn, København K', 55.686300, 12.612254],
    ['PH Metropol Sigurdsgade 26, København N', 55.703648, 12.554748],
    ['Esromgade, København N', 55.698693, 12.540172],
    ['Fogedmarken, København N', 55.700727, 12.554118],
    ['Fisketorvets parkeringsplads, København V', 55.661491, 12.561851],
    ['Pladsen foran Øksenhallen, København V', 55.669698, 12.561328],
    ['Kødbyen, København V', 55.668776, 12.559901],
    ['Øresund metro st., København S', 55.661892, 12.628485],
    ['Amager Strand metro st., København S', 55.656679, 12.631595],
    ['Jorisvej/Hedegaardsvej ved Femøren metro st., København S', 55.645702, 12.637906],
    ['Amager Strandvej, langs Amager Strandpark, København S', 55.652397, 12.639650],
    ['Bebyggelserne omkring Lergravsparken metro st., København S', 55.662280, 12.616417],
    ['Ved Norgesporten, tæt på Den Lille Havfrue, København Ø', 55.694202, 12.594257],
    ['Ragnhildgade, København Ø', 55.709533, 12.553666],
    ['Omkring Valby st., Valby', 55.664212, 12.514418]
];

    //var latlng = new google.maps.LatLng(55.685361, 12.528127);
    var myOptions = {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

    var map = new google.maps.Map(document.getElementById("gmap"),myOptions);
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < markers.length; i++) {  
            var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(pos);
            marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
        map.fitBounds(bounds);

    var pinIcon = new google.maps.MarkerImage(
      "http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png",
      null, /* size is determined at runtime */
      null, /* origin is 0,0 */
      null, /* anchor is bottom center of the scaled image */
      new google.maps.Size(20, 32)
   ); 
   marker.setIcon(pinIcon);
    }

    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(11);
        google.maps.event.removeListener(boundsListener);
    });

    function changeMarker(marker) {
    var icon = new Google.maps.MarkerImage({ url:"http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker2.png"});
    marker.setIcon(icon);
}

});

我只是在页面中调用div，但我不确定如何构造div来实现上述效果

希望得到一些指导。

此致帕特里克

在谷歌地图api 3中将鼠标悬停在div上更改标记

0 个答案: