Google地图上的多个标记带有不同的图标？

debugcn 发表于 Dev

历史

我正在尝试在Google地图上使用带有不同图标的多个标记。

像这样的东西：

var locations = [
    ['Me', 'ss00sd', 'meicon.png'],
    ['Location 2 Name', 'rm191qw', 'house.png'],
    ['Location 3 Name', 'ss68ll', 'house.png'],
];

但我不知道如何实现这一目标。

我用到目前为止的内容创建了这个jsfiddle：http : //jsfiddle.net/1Lf0rowp/

编辑：我注意到代码由于某种原因未在jsfiddle中运行，因此在我自己的页面中运行正常！但我也将所有代码都包含在jsfiddle中。

代码段（来自jsfiddle）：

var locations = [
    ['Location 1 Name', 'ss00sd', 'meicon.png'],
   	    ['Location 2 Name', 'rm191qw', 'house.png'],
    ['Location 2 Name', 'ss68ll', 'house.png'],
];

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    geocoder = new google.maps.Geocoder();

    for (i = 0; i < locations.length; i++) {
        geocodeAddress(locations, i);
    }
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
    var title = locations[i][0];
    var address = locations[i][1];
    var url = locations[i][2];
    geocoder.geocode({
        'address': locations[i][1]
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                icon: 'meicon.png',
                map: map,
                position: results[0].geometry.location,
                title: title,
                animation: google.maps.Animation.DROP,
                address: address,
                url: url
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            alert("geocode of " + address + " failed:" + status);
        }
    });
}

function infoWindow(marker, map, title, address, url) {
    google.maps.event.addListener(marker, 'click', function () {
        var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div></p></div>";
        iw = new google.maps.InfoWindow({
            content: html,
            //maxWidth: 350
        });
        iw.open(map, marker);
    });
}

function createMarker(results) {
    var marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
    })
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
    infoWindow(marker, map, title, address, url);
    return marker;
}

html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map_canvas" style="width:100%; height:900px;"></div>

伊万·乔沃维奇（IvanJovović）

你很接近，只是包括url以后icon:当你创建标记：

var marker = new google.maps.Marker({
                icon: url,

我对您的小提琴进行了一些更改以使其起作用：您忘记了调用，initialize()并且也将url数据更改为图标，因此现在您的locations数组如下所示：

 var locations = [
        ['Location 1 Name', 'ss00sd', 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png'],
        ['Location 2 Name', 'rm191qw', 'https://www.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/images/marker.png'],
        ['Location 2 Name', 'ss68ll', 'http://www.worldheritageoutlook.iucn.org/resources/heritage_site_map_pin.png'],
    ];

工作提琴：http : //jsfiddle.net/1Lf0rowp/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。