JS Maps v3:带有用户个人资料图片的自定义标记 [英] JS Maps v3: custom marker with user profile picture

问题描述

自从 2 天以来我一直在努力做一些我认为很容易的事情，在地图上，我必须为每个用户显示一个标记，其中包含用户 FB 个人资料图片.

I am struggling since 2 days with something I was thinking easy, on a map, I have to display a marker for each user with the user FB profile picture inside.

我想知道如何得到与此类似的结果?我尝试的东西真的很黑.

I am wondering how I can have a result similar to this one? What I tried was really hackish.

• 我把FB图片作为标记图标
• 我在标记的标签上放了一个 CSS 类
• 我找到了兄弟来添加这个边框和这个箭头来装饰用户图片

但是当地图上有多个标记时它不起作用.

but it doesn't work when there is more than one marker on the map.

.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 例如)里面有自定义用户图片?有可能吗?

• how can I get an icon like that (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 for instance) with a custom user picture inside? is it possible?

否则怎么可能自定义图标(如果是个人资料图片)以获得与屏幕截图类似的结果

otherwise how is it possible to customize the icon (if it is the profile picture) to have a result similar to the screenshot

感谢您的帮助

推荐答案

此答案假定您已经拥有 facebook 个人资料图片的 URI.老实说，感觉有一种更简单的方法，但我发现了一些代码 展示了如何使用自定义 HTML 元素创建自定义标记，我从那里开始.从那里可以很容易地创建一个接受图像 URI 作为参数的自定义标记.从原来的开始，我只是添加了一个 imageSrc 参数，通过将类名附加到新 div 来将样式移到代码之外.在 html 和 css 方面，我只是将带有传递的图像 URI 的图像附加到 div 中，并添加了一些 CSS 以使其看起来像您拥有的那样.

This answer assumes you already have the URIs for the facebook profile images. Honestly, it feels there is an easier way, but I found some code that shows how to create a custom marker with custom HTML elements and I went from there. From there's it's pretty easy to create a custom marker that accepts a image URI as a parameter. From the original, I just added an imageSrc parameter, moved the styling outside the code by attaching a class name to the new div. In terms of html and css, I just appended an image with the passed image URI into the div, and just added some CSS to make it look like what you have.

演示

所以 javascript 代码看起来像这样:

So the javascript code looks something like this:

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_;
};

我想我在这里只添加了一两行.我认为您可以将其添加到您的页面中.有了这个，你就可以像往常一样设置容器的样式，它应该应用于所有自定义标记.您可以添加您认为合适的元素和类来实现您想要的外观.但为了完成起见，我在此处添加了用于演示的样式.

I think I added only one or two lines here. You can just add this to your page I think. With this in place you can just style the container as normal, and it should apply to all the custom markers. You can add elements and classes as you see fit to achieve the look you are looking for. But for completion's sake I added the styles I used for the demo here.

.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 循环将它们放在地图上.

And for the demo I have some sample data in array and placed them on the map using a for loop.

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
   )
}

希望能帮到你.

这篇关于JS Maps v3:带有用户个人资料图片的自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！