0

我有一张正在开发的地图。基本的 Google RED DROPLET 图标显示为我的标记图像。如何获得我自己的自定义图像？我有几乎所有 50 个标记的单独图像（将是公司的徽标）。

有人可以帮忙吗？这是链接。

使用我目前拥有的代码设置自定义标记的任何帮助都会很棒。

4

2 回答 2

1

从实际代码：

var image = './beachflag.png';
[...]
var marker=new google.maps.Marker({
  position: myPosition,
  map: map,
  icon: image
});

你的代码：

var point = new google.maps.LatLng(37.984798,-121.312094);
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>');
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]

你需要做什么：

var point = new google.maps.LatLng(37.984798,-121.312094);
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>', image);

并更改 CreateMarker：

function createMarker(latlng, html, img) {

// 注意这里添加了img参数

  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    ***icon: img,***
    zIndex: Math.round(latlng.lat()*-100000)<<5
  });
[...]

编辑 使用您的代码和我的模组进行快速测试。我为标志设置了一些标记

于 2012-05-30T18:39:28.730 回答
0

您可以选择图像，然后将该图像与您的纬度和经度相关联，在这种情况下，有一个函数可以创建标记。

if(location.category=="TEAMNAME"){
    var image='img/blueMarker.png';
}
if(location.category=="TEAMNAME2"){
    var image='img/redMarker.png';
}
function displayLocation(location){
        var content = '<strong><p>Team: ' +location.category + '</strong>';
        var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            draggable: true,
            visible: true,
            title: location.category,
            icon: image
        });
        /*Content window asociated to created markers*/
        google.maps.event.addListener(marker, 'click', function(){
            infowindow.setContent(content);
            infowindow.open(map, marker);
        });
        return marker;
    }
于 2012-05-30T18:55:33.420 回答