有沒有辦法使谷歌地圖標記中的透明度不可點擊

Question

好吧，所以我有一個谷歌地圖應用程序，我從我的HTML瀏覽svgs，然后從他們制作標記。 但現在的問題是，標記附帶的透明度也是可點擊的，現在這會產生緊密集群中的問題。 所以我的問題是，除了在谷歌地圖標記中使用“path：”而不是“url：”之外，是否可以只制作具有可點擊路徑的標記位而不是整個區域。

目前：

//gets it from my html and treats it like a path
 var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("builtMarker").innerHTML);
 var sizeX = 160;
 var sizeY = 140;
 //make my custom icon
 var icon = {
     url: iconUrl,
     scaledSize: new google.maps.Size(sizeX, sizeY),
     anchor: new google.maps.Point(sizeX / 2, sizeY / 2)
 };

loc = new google.maps.LatLng(63.68212926717004, -99.33484864981511);
marker = new google.maps.Marker({
     position: loc,
     map: map,
     draggable: false,
     icon: icon,
     zIndex: -20,
 });

https://jsfiddle.net/y8yj86og/3/

因此，如果你看看那個小提琴，“懸停”的手在它實際到達圖標之前就會改變，我的svg標記非常復雜並且根據參數改變大小，因此更改視圖框大小將導致它在我制作時被切斷一個更大的圖標。 還有其他方法可以解決這個問題嗎？ 就像將視圖框大小設置為auto或者其他內容一樣

Answer 1

google.maps.Marker有一個shape選項，允許您為非IE瀏覽器指定標記的“可點擊”區域。

MarkerShape對象規范

google.maps.MarkerShape對象規范

此對象為Internet Explorer以外的瀏覽器定義標記圖像的可單擊區域 。 形狀由兩個屬性組成 - 類型和坐標 - 定義圖像的非透明區域。 Internet Explorer不需要MarkerShape對象，因為默認情況下瀏覽器不會在圖像的透明區域上觸發事件。

對於您的圖標（至少是您在示例中提供的圖標），該形狀大致為三角形：

marker = new google.maps.Marker({
  position: loc,
  map: map,
  draggable: false,
  icon: icon,
  zIndex: -20,
  shape: { 
      type: 'poly',
      coords: [50,50,  105,50,  75,90,  50,50]
  } 
});

更新小提琴

代碼段：

 var myLatlng = new google.maps.LatLng(38.392303, -86.931067); map = new google.maps.Map(document.getElementById("map-canvas"), { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("builtMarker").innerHTML); var sizeX = 160; var sizeY = 140; var icon = { url: iconUrl, scaledSize: new google.maps.Size(sizeX, sizeY), anchor: new google.maps.Point(sizeX / 2, sizeY / 2) }; loc = new google.maps.LatLng(63.68212926717004, -99.33484864981511); marker = new google.maps.Marker({ title: "SVG mark", position: loc, map: map, draggable: false, icon: icon, zIndex: -20, shape: { type: 'poly', coords: [50, 50, 105, 50, 75, 90, 50, 50] } }); map.panTo(loc); 

 <script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <div id="map-canvas" style="height:600px"></div> <div id="builtMarker"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve"> <path fill="#74C380" stroke="#000000" stroke-miterlimit="10" d="M319.669,455.002c-11.99-16.691-22.492-15.168-22.492-15.168v0.016 c-0.006,0-10.504-1.488-22.475,15.23c1.299,3.563,22.51,61.154,22.51,61.154l0.004-0.02 C297.216,516.213,318.372,458.568,319.669,455.002z" /> <path opacity="0.54" fill="#74C380" stroke="#000000" stroke-miterlimit="10" d="M297.187,440.656" /> <path fill="#234821" stroke="#000000" stroke-miterlimit="10" d="M297.171,422.465c0,0-13.275-0.682-26.111,12.199 c0.713,1.557,4.797,9.029,6.254,11.705c10.332-10.494,19.873-9.631,19.873-9.631s9.543-0.877,19.9,9.602 c1.451-2.68,5.516-10.158,6.225-11.717C310.444,421.764,297.171,422.465,297.171,422.465z" /> <path fill="#C52727" stroke="#000000" stroke-miterlimit="10" d="M297.165,404.046c0,0-17.482-0.683-34.387,12.198 c0.939,1.557,6.316,9.029,8.236,11.705c13.607-10.494,26.174-9.629,26.174-9.629s12.568-0.879,26.209,9.6 c1.906-2.68,7.262-10.156,8.195-11.717C314.646,403.344,297.165,404.046,297.165,404.046z" /> <path fill="#D8E022" stroke="#000000" stroke-miterlimit="10" d="M297.157,385.625c0,0-21.969-0.682-43.213,12.199 c1.18,1.557,7.938,9.029,10.352,11.705c17.098-10.494,32.895-9.63,32.895-9.63s15.793-0.878,32.936,9.601 c2.396-2.68,9.127-10.157,10.301-11.717C319.13,384.924,297.157,385.625,297.157,385.625z" /> <path fill="#3F52A4" stroke="#000000" stroke-miterlimit="10" d="M297.149,367.205c0,0-28.982-0.682-57.008,12.199 c1.559,1.557,10.471,9.029,13.654,11.705c22.557-10.494,43.396-9.63,43.396-9.63s20.834-0.878,43.447,9.601 c3.16-2.68,12.041-10.157,13.59-11.717C326.132,366.504,297.149,367.205,297.149,367.205z" /> <path fill="#3B98D4" stroke="#000000" stroke-miterlimit="10" d="M297.142,348.785c0,0-35.719-0.682-70.26,12.198 c1.922,1.557,12.906,9.03,16.828,11.706c27.803-10.494,53.484-9.631,53.484-9.631s25.676-0.877,53.549,9.601 c3.893-2.679,14.838-10.157,16.746-11.716C332.86,348.083,297.142,348.785,297.142,348.785z" /> <path fill="#B24F9E" stroke="#000000" stroke-miterlimit="10" d="M297.13,325.867c0,0-44.416-0.811-87.363,14.494 c2.389,1.85,16.049,10.729,20.924,13.909c34.572-12.469,66.506-11.443,66.506-11.443s31.926-1.043,66.584,11.408 c4.842-3.184,18.453-12.068,20.824-13.922C341.546,325.032,297.13,325.867,297.13,325.867z" /> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="271.417" y1="434.4395" x2="323.6689" y2="434.4395"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_1_)" d="M297.528,422.491c0,0-13.275-0.682-26.111,12.199c0.713,1.557,4.797,9.029,6.254,11.705 c10.332-10.494,19.873-9.631,19.873-9.631s9.543-0.877,19.9,9.602c1.451-2.68,5.516-10.158,6.225-11.717 C310.802,421.79,297.528,422.491,297.528,422.491z" /> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="263.124" y1="415.9946" x2="332.5928" y2="415.9946"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_2_)" d="M297.839,404.046c0,0-17.649-0.682-34.715,12.199c0.948,1.557,6.377,9.029,8.314,11.705 c13.736-10.494,26.421-9.631,26.421-9.631s12.688-0.877,26.458,9.602c1.929-2.68,7.333-10.158,8.275-11.717 C315.485,403.345,297.839,404.046,297.839,404.046z" /> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="253.9443" y1="397.5737" x2="340.4268" y2="397.5737"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_3_)" d="M297.161,385.625c0,0-21.972-0.682-43.217,12.199c1.18,1.557,7.938,9.029,10.351,11.705 c17.101-10.494,32.892-9.631,32.892-9.631s15.796-0.877,32.938,9.602c2.401-2.68,9.129-10.158,10.303-11.717 C319.129,384.924,297.161,385.625,297.161,385.625z" /> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="240.1416" y1="378.8638" x2="355.2295" y2="378.8638"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_4_)" d="M297.654,367.205c0,0-29.24-0.665-57.513,11.903c1.57,1.519,10.564,8.81,13.774,11.421 c22.757-10.239,43.771-9.397,43.771-9.397s21.02-0.855,43.832,9.369c3.195-2.615,12.147-9.912,13.71-11.433 C326.888,366.521,297.654,367.205,297.654,367.205z" /> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="225.4072" y1="360.7339" x2="370.3096" y2="360.7339"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_5_)" d="M297.818,349.075c0,0-36.814-0.665-72.411,11.903c1.978,1.519,13.301,8.81,17.343,11.421 c28.651-10.239,55.11-9.397,55.11-9.397s26.465-0.855,55.188,9.369c4.022-2.615,15.295-9.912,17.262-11.433 C334.626,348.391,297.818,349.075,297.818,349.075z" /> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="207.0791" y1="339.6611" x2="388.25" y2="339.6611"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_6_)" d="M297.614,325.407c0,0-46.028-0.813-90.535,14.553c2.472,1.856,16.63,10.771,21.684,13.964 c35.823-12.519,68.904-11.489,68.904-11.489s33.089-1.046,69.001,11.455c5.029-3.198,19.124-12.119,21.582-13.979 C343.636,324.57,297.614,325.407,297.614,325.407z" /> </svg> </div>