如何在Google地图自定义图标中添加圆形形状? [英] How add circle Shape in Google maps custom icon?

问题描述

我对地图上的自定义图像有疑问.

例如:我的图标以这种方式生成，并且图标包含图像:

  var ic = {//图标url:图标，//urlscaledSize:new google.maps.Size(30，30)，//缩放大小来源:新的google.maps.Point(0,0)，//来源锚点:new google.maps.Point(0，0)，//锚点//定义形状//定义形状形状:{coords:[17,17,18]，type:'circle'}，//设置为false，否则标记将通过画布呈现//并且无法通过CSS访问优化:false，标题:"spot"};var marker = new google.maps.Marker({地图:地图，标题:名称，位置:latlngset，图标:ic}); 

我想让我的图标像css半径为50％(圆形).我该怎么办?

解决方案

相关问题:

 //改编自http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html函数CustomMarker(latlng，map，imageSrc){this.latlng_ = latlng;this.imageSrc = imageSrc;//设置LatLng和文本后，将叠加层添加到地图上.这会//触发对panes_changed的调用，该调用应依次调用draw.this.setMap(map);}CustomMarker.prototype = new google.maps.OverlayView();CustomMarker.prototype.draw = function(){//检查div是否已创建.var div = this.div_;如果(！div){//创建叠加文字DIVdiv = this.div_ = document.createElement('div');//创建代表我们的CustomMarker的DIVdiv.className ="customMarker"var img = document.createElement("img");img.src = this.imageSrc;div.appendChild(img);var me = this;google.maps.event.addDomListener(div，"click"，function(event){google.maps.event.trigger(me，"click");});//然后将叠加层添加到DOMvar panes = this.getPanes();panes.overlayImage.appendChild(div);}//放置叠加层var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);如果(点){div.style.left = point.x +'px';div.style.top = point.y +'px';}};CustomMarker.prototype.remove = function(){//检查叠加层是否在地图上，是否需要删除.如果(this.div_){this.div_.parentNode.removeChild(this.div_);this.div_ = null;}};CustomMarker.prototype.getPosition = function(){返回this.latlng_;};var map = new google.maps.Map(document.getElementById("map")，{变焦:17中心:新的google.maps.LatLng(37.77088429547992，-122.4135623872337)，mapTypeId:google.maps.MapTypeId.ROADMAP});var数据= [{profileImage:"http://www.gravatar.com/avatar/d735414fa8687e8874783702f6c96fa6?s=90&d=identicon&r=PG"，pos:[37.77085，-122.41356]，}，{profileImage:"http://placekitten.com/90/90"，pos:[37.77220，-122.41555]，}]对于(var i = 0; i< data.length; i ++){新的CustomMarker(新的google.maps.LatLng(数据[i] .pos [0]，数据[i] .pos [1])，地图，数据[i] .profileImage)}  

  .customMarker {位置:绝对；光标:指针；背景:#424242;宽度:100px；高度:100px；/*-宽度/2 */左边距:-50px;/*-高度+箭头*/页边距:-110px;边界半径:50％；填充:0px;}.customMarker:在{之后内容: "";位置:绝对；底部:-10px；左:40px；border-width:10px 10px 0;边框样式:实心；边框颜色:#424242透明;显示:块；宽度:0;}.customMarker img {宽度:90像素；高度:90px；边距:5px;边界半径:50％；}  

 <脚本src ="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">< lt;/script>< div id ="map" style ="width:640pxpx; height:480px;"> map div</div>  

I have problem with custom images on map.

For example: My icons generated this way, and icon contains image:

 var ic = { //icon
        url: icon, // url
        scaledSize: new google.maps.Size(30, 30), // scaled size
        origin: new google.maps.Point(0,0), // origin
        anchor: new google.maps.Point(0, 0), // anchor
        //define the shape
        //define the shape
        shape:{coords:[17,17,18],type:'circle'},
        //set optimized to false otherwise the marker  will be rendered via canvas
        //and is not accessible via CSS
        optimized:false,
        title: 'spot'

    };

    var marker = new google.maps.Marker({
        map: map, title: name , position: latlngset, icon: ic
    });

I want make my icons like css 50% radius (circle shape). How I can do it?

解决方案

Related question: JS Maps v3: custom marker with user profile picture

Using code from there, and changing the border-radius to 50%, gives me a circular icon with the image in the circle.

proof of concept fiddle

//adapted from http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html
function CustomMarker(latlng, map, imageSrc) {
  this.latlng_ = latlng;
  this.imageSrc = imageSrc;
  // Once the LatLng and text are set, add the overlay to the map.  This will
  // trigger a call to panes_changed which should in turn call draw.
  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"


    var img = document.createElement("img");
    img.src = this.imageSrc;
    div.appendChild(img);
    var me = this;
    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_;
};

var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 17,
  center: new google.maps.LatLng(37.77088429547992, -122.4135623872337),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var data = [{
  profileImage: "http://www.gravatar.com/avatar/d735414fa8687e8874783702f6c96fa6?s=90&d=identicon&r=PG",
  pos: [37.77085, -122.41356],
}, {
  profileImage: "http://placekitten.com/90/90",
  pos: [37.77220, -122.41555],
}]

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

.customMarker {
  position: absolute;
  cursor: pointer;
  background: #424242;
  width: 100px;
  height: 100px;
  /* -width/2 */
  margin-left: -50px;
  /* -height + arrow */
  margin-top: -110px;
  border-radius: 50%;
  padding: 0px;
}

.customMarker:after {
  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 {
  width: 90px;
  height: 90px;
  margin: 5px;
  border-radius: 50%;
}

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="width: 640pxpx; height: 480px;">map div</div>

这篇关于如何在Google地图自定义图标中添加圆形形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！