JS Maps v3：使用用户个人资料图片自定义标记

Question

JS Maps v3：使用用户个人资料图片自定义标记

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersmarker

8

我已经纠结了两天，因为我认为很简单的东西，就是在地图上为每个用户显示一个标记，并在标记内部显示用户的FB个人资料图片。

enter image description here

我想知道如何实现类似于上面这个示例的结果？我尝试过一些方法，但都不太好。

我将FB图片作为标记图标
我在标记的标签上放置了CSS类
我查找兄弟节点并添加该边框和箭头以装饰用户图片

但是当地图上有多个标记时，它无法正常工作。

.marker-labels {
    display: none !important;

    + div  { 
        background-color: $dark-gray; 
        border: 2px solid $dark-gray;
        @include radius(0.2em);
        height: 54px !important;
        width: 54px !important;
        overflow: inherit !important;

       > img {
            height: 50px;
            width: 50px;
        } 

        &:after {
            content: ' ';
            height: 0;
            width: 0;
            border: 6px solid transparent; 
            border-top-color: $dark-gray;
            position: absolute;
            top: 52px;
            left: 19px;
        }
    }
}

全球问题：

如何获得像这样的图标 (http://mt-st.rfclipart.com/image/thumbnail/24-1d-5f/blue-glossy-square-map-pin-or-speech-bubble-Download-Royalty-free-Vector-File-EPS-29153.jpg 例如) 并插入自定义用户图片？这是否可能？
否则，如何自定义图标（如果是个人资料图片）以获得类似于屏幕截图的结果

感谢您的帮助

- dbaq

类似这样的jsfiddle？来自这个类似的问题：如何裁剪一个圆形图像，然后将其设置在另一个图像内？。 - geocodezip

是的，但这种解决方案适用于静态地图。 - dbaq

给那些踩了这个问题的人，至少你应该说一下为什么。如果问题不清楚，我可以再试着解释一遍。 - dbaq

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mfirdaus · Accepted Answer

这篇回答假设你已经有了Facebook个人资料图片的URI。老实说，感觉还有更简单的方法，但我找到了一些代码，显示如何创建带有自定义HTML元素的自定义标记，然后从那里开始。从原始代码中，我只是添加了一个imageSrc参数，将样式移动到代码外部，通过将类名附加到新

来实现。在HTML和CSS方面，我只是将传递的图像URI附加到

中，并添加了一些CSS使其看起来像您拥有的内容。

演示

所以JavaScript代码大致如下：

function CustomMarker(latlng, map, imageSrc) { 
    this.latlng_ = latlng;
    this.imageSrc = imageSrc; //added imageSrc
    this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function () {
    // Check if the div has been created.
    var div = this.div_;
    if (!div) {
        // Create a overlay text DIV
        div = this.div_ = document.createElement('div');
        // Create the DIV representing our CustomMarker
        div.className = "customMarker" //replaced styles with className

        var img = document.createElement("img");
        img.src = this.imageSrc; //attach passed image uri
        div.appendChild(img);
        google.maps.event.addDomListener(div, "click", function (event) {
            google.maps.event.trigger(me, "click");
        });

        // Then add the overlay to the DOM
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    // Position the overlay 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (point) {
        div.style.left = point.x + 'px';
        div.style.top = point.y + 'px';
    }
};

CustomMarker.prototype.remove = function () {
    // Check if the overlay was on the map and needs to be removed.
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};

CustomMarker.prototype.getPosition = function () {
    return this.latlng_;
};

我认为我只添加了一两行代码。您可以将此添加到您的页面中。有了这个，您可以像平常一样对容器进行样式设置，然后应用到所有自定义标记上。您可以根据需要添加元素和类来实现所需的外观。但为了完整起见，我在此处添加了我用于演示的样式。

.customMarker {   /* the marker div */
    position:absolute;
    cursor:pointer;
    background:#424242;
    width:100px;
    height:100px;

    /* we'll offset the div so that
       the point passed doesn't end up at
       the upper left corner but at the bottom
       middle. so we'll move it left by width/2 and
       up by height+arrow-height */
    margin-left:-50px;  
    margin-top:-110px;
    border-radius:10px;
    padding:0px;
}
.customMarker:after { //triangle
    content:"";
    position: absolute;
    bottom: -10px;
    left: 40px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #424242 transparent;
    display: block;
    width: 0;
}
.customMarker img { //profile image
    width:90px;
    height:90px;
    margin:5px;
    border-radius:2px;
}

对于演示，我有一些样本数据在数组中，并使用for循环将它们放置在地图上。

var data = [{
    profileImage: "http://domain.com/image1.jpg",
    pos: [37.77, -122.41],
}, {
    profileImage: "http://domain.com/image2.jpg",
    pos: [37.77, -122.41],
}]

for(var i=0;i<data.length;i++){
   new CustomMarker(
      new google.maps.LatLng(data[i].pos[0],data[i].pos[1]),
      map,
      data[i].profileImage
   )
}

希望这有帮助。