Google 地图 Javascript：将用户照片添加到标记

发布于 2024-11-04 01:33:03 字数 1421 浏览 3 评论 0原文

我有我的小纸牌游戏用户的个人资料页面，例如这个 - 我在其中通过查找他们的城市来显示他们的位置。我当前的 jQuery 代码在这里：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(function() {
    // the city name is inserted here by the PHP script
    findCity('New-York');
});

function createMap(center) {
    var opts = {
        zoom: 9,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById("map"), opts);
}

function findCity(city) {
    var gc = new google.maps.Geocoder();
    gc.geocode( { "address": city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var pos = results[0].geometry.location;
            var map = createMap(pos);
            var marker = new google.maps.Marker({
                map: map, 
                title: city,
                position: pos
            });
        }
    });
}

</script>
......
<div id="map"></div>

它运行良好，但我只得到一个简单的红色标记，其中显示一个点：

有没有办法显示用户头像而不是简单的标记？

我的数据库中有用户图片的 URL（以及姓名、城市等），

它们大多是大图像（大于 200x300）。

原文

I have profile pages for users of my little card game, like this one - where I display their position by looking up their city. My current jQuery code is here:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(function() {
    // the city name is inserted here by the PHP script
    findCity('New-York');
});

function createMap(center) {
    var opts = {
        zoom: 9,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById("map"), opts);
}

function findCity(city) {
    var gc = new google.maps.Geocoder();
    gc.geocode( { "address": city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var pos = results[0].geometry.location;
            var map = createMap(pos);
            var marker = new google.maps.Marker({
                map: map, 
                title: city,
                position: pos
            });
        }
    });
}

</script>
......
<div id="map"></div>

and it works well, but I only get a simple red marker with a dot displayed:

map with a marker