JS地图v3：自定义标记与用户个人资料图片 [英] JS Maps v3: custom marker with user profile picture
问题描述
p>
我想知道我怎么能得到与这个相似的结果？
，但在地图上有多个标记时不起作用。
.marker-labels {
display：none！important;
+ div {
background-color：$ dark-grey;
border：2px solid $ dark-grey;
@include radius（0.2em）;
身高：54px！重要;
width：54px！important;
overflow：inherit！important;
> img {
height：50px;
width：50px;
}
&：后：{
content：'';
height：0;
width：0;
border：6px纯透明;
border-top-color：$ dark-grey;
位置：绝对;
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 例如）里面有一个自定义的用户图片？是否有可能？
-
否则如何自定义图标（如果是个人资料图片）以获得类似于屏幕截图的结果
感谢您的帮助
这个答案假设你已经拥有Facebook个人资料图片的URI。老实说，这感觉有一个更简单的方法，但我发现 一些代码显示如何使用自定义HTML元素创建自定义标记，然后我从那里开始。从这里开始创建一个接受图像URI作为参数的自定义标记非常简单。从最初的版本开始，我只是添加了一个 imageSrc 参数，通过将类名附加到新的div上，将样式移动到代码之外。就html和css而言，我只是将带有传递图像URI的图像添加到div中，然后添加一些CSS，使其看起来像你所拥有的。
所以javascript代码看起来像这样：
函数CustomMarker（latlng，map ，imageSrc）{
this.latlng_ = latlng;
this.imageSrc = imageSrc; //添加imageSrc
this.setMap（map）;
}
CustomMarker.prototype = new google.maps.OverlayView（）;
CustomMarker.prototype.draw = function（）{
//检查div是否已创建。
var div = this.div_;
if（！div）{
//创建覆盖文本DIV
div = this.div_ = document.createElement（'div'）;
//创建代表我们的CustomMarker的DIV
div.className =customMarker//用className替换样式
$ b var img = document.createElement（img）;
img.src = this.imageSrc; //附加传递的图像uri
div.appendChild（img）;
google.maps.event.addDomListener（div，click，function（event）{
google.maps.event.trigger（me，click）;
}）;
//然后将覆盖图添加到DOM
var panes = this.getPanes（）;
panes.overlayImage.appendChild（div）;
}
//定位叠加层
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（）{
//检查叠加层是否在地图上，需要删除。
if（this.div_）{
this.div_.parentNode.removeChild（this.div_）;
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function（）{
return this.latlng_;
};
我想我在这里只添加了一两行。您可以将其添加到我认为的网页中。有了这个，您可以像平常一样对容器进行设计，并且它应该适用于所有自定义标记。您可以根据自己的需要添加元素和类，以实现您正在寻找的外观。但为了完成，我在这里添加了我用于演示的样式。
.customMarker {/ * marker div * /
位置：绝对;
光标：指针;
背景：＃424242;
width：100px;
height：100px;
/ *我们将抵消div，以便通过的点b $ b不会以
左上角为底，而是以
为底。所以我们将它的宽度/ 2和
向左移动高度+箭头高度* /
margin-left：-50px;
margin-top：-110px;
border-radius：10px;
padding：0px;
}
.customMarker：{//三角形
内容：;
位置：绝对;
bottom：-10px;
left：40px;
border-width：10px 10px 0;
border-style：solid;
border-color：＃424242透明;
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 ：（$ i
$ google.maps.LatLng（data [i] .pos [0]，data [i] .pos [1]），
map，
data [i] .profileImage
）
我希望有帮助。
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.
- I put the FB picture as the marker icon
- I put a CSS class on the label of the marker
- I find the sibling to add this border and this arrow to decorate the user picture
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;
}
}
}
global question:
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
thanks for your help
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.
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;
}
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
)
}
I hope that helps.
这篇关于JS地图v3：自定义标记与用户个人资料图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
