Google地图上的SVG标记未显示

时间：2015-06-18 17:03:17

标签： javascript google-maps google-maps-api-3 svg

当我复制Google的SVG标记示例代码时，一切正常，但是当我在Inkscape中创建自己的SVG标记时，图标不会出现。

var walkIcon = {
    path: 'm 375.65048,522.72658 c 1.40058,1.33792 3.38088,2.4914 3.58389,4.62022 0.33282,1.7212 1.62154,3.13596 3.271,3.67594 1.03889,0.25403 1.6602,2.07967 0.0883,1.75669 -1.5495,-0.2461 -2.78641,-1.31821 -4.00567,-2.21914 -0.57041,-1.04216 -2.10653,-2.1964 -2.20994,-0.258 -0.60169,1.67286 -0.81673,3.54682 -0.27676,5.26583 1.3796,2.02895 3.11363,3.98448 3.62242,6.44838 -0.004,1.73794 0.0823,3.64805 -0.39463,5.27182 -1.57371,1.38487 -2.26199,-1.26632 -1.80003,-2.45547 0.30135,-2.07993 -0.51524,-4.4087 -2.43603,-5.44795 -0.91738,-0.55389 -2.37786,-2.14177 -3.31182,-0.87977 -1.44621,2.91511 -2.45985,6.07291 -4.32864,8.76654 -0.62298,1.65832 -2.82533,0.6639 -2.23248,-0.96726 0.48335,-1.02152 0.93088,-2.07927 1.33985,-3.16116 0.97621,-2.34602 2.13243,-4.61044 3.21895,-6.90591 -0.21478,-3.47134 0.21092,-7.1221 2.03567,-10.15065 -1.74077,0.12515 -3.53761,1.46119 -3.55105,3.32307 -0.50221,1.12378 0.13004,3.17833 -0.99826,3.7379 -1.29058,-0.90986 -0.8282,-2.65883 -0.76503,-3.99023 0.22251,-2.66697 2.17436,-4.98661 4.63974,-5.93494 1.34969,-0.61406 2.89399,-0.89149 4.3562,-0.56217 1.4252,-0.88097 -0.89925,-2.00716 -0.5144,-3.24679 0.0125,-2.19929 3.36155,-3.1618 4.5599,-1.33053 1.06332,1.38806 0.40227,3.8766 -1.47801,4.08849 -0.81411,0.22503 -2.02129,-0.56788 -2.41318,0.55509 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
};

我怀疑它与我生成此图标的方式有关 - 在gEdit中打开保存的Inkscape SVG文件并从此处复制d值：

     <path
   style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
   d="m 375.65048,522.72658 c 1.40058,1.33792 3.38088,2.4914 3.58389,4.62022 0.33282,1.7212 1.62154,3.13596 3.271,3.67594 1.03889,0.25403 1.6602,2.07967 0.0883,1.75669 -1.5495,-0.2461 -2.78641,-1.31821 -4.00567,-2.21914 -0.57041,-1.04216 -2.10653,-2.1964 -2.20994,-0.258 -0.60169,1.67286 -0.81673,3.54682 -0.27676,5.26583 1.3796,2.02895 3.11363,3.98448 3.62242,6.44838 -0.004,1.73794 0.0823,3.64805 -0.39463,5.27182 -1.57371,1.38487 -2.26199,-1.26632 -1.80003,-2.45547 0.30135,-2.07993 -0.51524,-4.4087 -2.43603,-5.44795 -0.91738,-0.55389 -2.37786,-2.14177 -3.31182,-0.87977 -1.44621,2.91511 -2.45985,6.07291 -4.32864,8.76654 -0.62298,1.65832 -2.82533,0.6639 -2.23248,-0.96726 0.48335,-1.02152 0.93088,-2.07927 1.33985,-3.16116 0.97621,-2.34602 2.13243,-4.61044 3.21895,-6.90591 -0.21478,-3.47134 0.21092,-7.1221 2.03567,-10.15065 -1.74077,0.12515 -3.53761,1.46119 -3.55105,3.32307 -0.50221,1.12378 0.13004,3.17833 -0.99826,3.7379 -1.29058,-0.90986 -0.8282,-2.65883 -0.76503,-3.99023 0.22251,-2.66697 2.17436,-4.98661 4.63974,-5.93494 1.34969,-0.61406 2.89399,-0.89149 4.3562,-0.56217 1.4252,-0.88097 -0.89925,-2.00716 -0.5144,-3.24679 0.0125,-2.19929 3.36155,-3.1618 4.5599,-1.33053 1.06332,1.38806 0.40227,3.8766 -1.47801,4.08849 -0.81411,0.22503 -2.02129,-0.56788 -2.41318,0.55509 z"
   id="path3770"
   inkscape:connector-curvature="0" />

注：

这是参考自定义符号，而不是标记。文件在这里： https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-custom

2 个答案:

答案 0 :(得分：0)

对我而言，符号有效，但它不在理想的位置。

使用anchor-property，例如anchor:new google.maps.Point(375,522)

另请参阅：Google Maps API: SVG Marker moves relative to map when you zoom 

function initialize() {
var mapOptions = {
            
            zoom: 7,
            
            center: new google.maps.LatLng(49.5,51)
            
        };
        var walkIcon={
    path: 'm 375.65048,522.72658 c 1.40058,1.33792 3.38088,2.4914 3.58389,4.62022 0.33282,1.7212 1.62154,3.13596 3.271,3.67594 1.03889,0.25403 1.6602,2.07967 0.0883,1.75669 -1.5495,-0.2461 -2.78641,-1.31821 -4.00567,-2.21914 -0.57041,-1.04216 -2.10653,-2.1964 -2.20994,-0.258 -0.60169,1.67286 -0.81673,3.54682 -0.27676,5.26583 1.3796,2.02895 3.11363,3.98448 3.62242,6.44838 -0.004,1.73794 0.0823,3.64805 -0.39463,5.27182 -1.57371,1.38487 -2.26199,-1.26632 -1.80003,-2.45547 0.30135,-2.07993 -0.51524,-4.4087 -2.43603,-5.44795 -0.91738,-0.55389 -2.37786,-2.14177 -3.31182,-0.87977 -1.44621,2.91511 -2.45985,6.07291 -4.32864,8.76654 -0.62298,1.65832 -2.82533,0.6639 -2.23248,-0.96726 0.48335,-1.02152 0.93088,-2.07927 1.33985,-3.16116 0.97621,-2.34602 2.13243,-4.61044 3.21895,-6.90591 -0.21478,-3.47134 0.21092,-7.1221 2.03567,-10.15065 -1.74077,0.12515 -3.53761,1.46119 -3.55105,3.32307 -0.50221,1.12378 0.13004,3.17833 -0.99826,3.7379 -1.29058,-0.90986 -0.8282,-2.65883 -0.76503,-3.99023 0.22251,-2.66697 2.17436,-4.98661 4.63974,-5.93494 1.34969,-0.61406 2.89399,-0.89149 4.3562,-0.56217 1.4252,-0.88097 -0.89925,-2.00716 -0.5144,-3.24679 0.0125,-2.19929 3.36155,-3.1618 4.5599,-1.33053 1.06332,1.38806 0.40227,3.8766 -1.47801,4.08849 -0.81411,0.22503 -2.02129,-0.56788 -2.41318,0.55509 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1,
    anchor:new google.maps.Point(375,522)
}
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        new google.maps.Polyline( { 
          strokeColor:'#000000', 
          strokeOpacity: 1.0, 
          strokeWeight: 3, 
          editable: true, 
          icons:[ { icon: walkIcon, offset: '0%'}],
          map:map,
          path:[new google.maps.LatLng(50, 50),new google.maps.LatLng(50, 52),new google.maps.LatLng(49, 51),new google.maps.LatLng(50, 50)]
        
        });  
      }
      google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

答案 1 :(得分：-1)

在@geocodezip提到它看起来太大之后，我从另一个stackoverflow帖子中找到了解决方案。

尽管我曾尝试将Inkscape中的图像调整为一个小的24像素图标，但这还不足以使图标显示。

我找到了这篇帖子，这是我问题的解决方案： Create custom symbol on polyline using SVG path

为了重申这里的解决方案，我在这个Web应用程序中打开了SVG图像： http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html

在此应用程序中，我将其重新调整为正确的尺寸，然后点击“保存”。这样做给了我一个新的SVG数据坐标系，然后我在我的谷歌地图中使用了walkIcon对象：

var walkIcon = {
    path: 'm-10.569659,-22.855438c0.270996,0.474976 0.757995,0.494995 0.91101,1.026978c0.078003,1.862976 1.925995,1.731995 1.266998,2.541992c-0.53302,-0.060974 -1.026001,-0.382019 -1.256012,-0.788025c-0.988006,-1.303955 -0.949004,0.162048 -0.781005,1.778015c0.433014,0.720032 0.893005,0.843018 1.137023,2.289001c0.084991,2.093018 -0.759002,2.656006 -0.71701,0.603027c0.006012,-1.254028 -0.82199,-2.17804 -1.536986,-1.992004c-0.637024,1.680969 -1.933015,4.01001 -2.35202,3.450012c-0.45099,-0.331055 0.390015,-1.277039 0.812012,-2.232056c1.247986,-1.811951 0.440002,-3.784973 1.312988,-5.483948c-0.546997,0.044006 -0.81601,0.470947 -1.11499,1.178955c-1.005005,3.544006 -1.175995,-0.994995 0.651001,-2.084961c0.632996,-0.392029 1.160004,-0.427002 1.618988,-0.311035c0.447021,-0.312012 -0.28299,-0.711975 -0.161987,-1.151978c0.003998,-0.781006 1.054993,-1.122986 1.431,-0.471985c0.333008,0.492004 0.126007,1.375977 -0.46402,1.450989c-0.254974,0.080017 -0.633973,-0.202026 -0.756989,0.197021l0,0z',
    scale: 1, 
    strokeColor: 'green',
    fillColor: 'green',
    fillOpacity: 1
};

感谢@geocodezip！

相关问题
最新问题