Question

我正在尝试在谷歌地图上使用不同图标的多个标记。

类似的东西：

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>

Answer 1

您非常亲密，只需在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/

谷歌地图上有多个标记与不同的图标？

1 个答案: