Question

我正试图摆弄谷歌地图。我在网上提出了一个很好的例子，它利用地图叠加而不是标记来提供更多定制标记。我这样做是因为我想将标记从一个svg路径设置为另一个svg路径。问题：当我插入svg svg显示，但没有路径/形状等。

Map<Integer, String> map = new HashMap<>();
for (int i = 0; i<100; i++) {
  map.put(i, "a");
}
for (Map.Entry entry : map.entrySet())
   System.out.print(entry.getKey() + "  ");

请原谅内联css和js，我只是测试并对此感到恼火...... JS

//创建自定义标记

       <!DOCTYPE HTML>
    <html>
    <head>

    <title>Google Maps API</title>

    <style type="text/css">

    .icon-container {
      background-color:yellow;
      width: 20px;
      height: 20px;
      position:absolute;
    }

    #icon {
      position:absolute;
      width:30px;
      height:30px;
    }

    @-webkit-keyframes example {
        0% {opacity: 0; width: 30px; height: 30px;}
        50% {opacity: 0.5; width: 50px; height: 50px;}
        100% {opacity: 1; width: 30px; height: 30px;}
    }
    @-webkit-keyframes example2 {
        0% {opacity: 1; width: 30px; height: 30px;}
        50% {opacity: 0.5; width: 15px; height: 15px;}
        100% {opacity: 0; width: 0px; height: 0px;}
    }

    #icon.show{
      -webkit-animation-name: example; /* Chrome, Safari, Opera */
      -webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
      animation-name: example;
      animation-duration:1.5s;
      opacity:1;
    }

    #icon.show{-webkit-animation-timing-function: ease-in-out;}

    #icon.show.alter {
      -webkit-animation-name: example2; /* Chrome, Safari, Opera */
      -webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
      animation-name: example;
      animation-duration:1.5s;
    }

    #icon.show.hide {
      -webkit-animation-name: example2; /* Chrome, Safari, Opera */
      -webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
      animation-name: example;
      animation-duration:1.5s;
      opacity: 0;
    }

    #map-canvas {
      width: 700px;
      height: 400px;
    }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript" src="CustomGoogleMapMarker.js"></script>
    <script type="text/javascript">

    function initialize() {

      var myLatlng = new google.maps.LatLng(-31.9546781,115.852662);
      var mapOptions = {
        zoom: 14,
        center: myLatlng,
        disableDefaultUI: true
      }

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      /*
      // Example standard marker
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!'
      });
      */

      overlay = new CustomMarker(
        myLatlng, 
        map,
        {
          marker_id: '123'
        }
      );
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    </head>
    <body>

      <div id="map-canvas"> </div>
      <div>
        <button type="button" id="show-button">Show</button>
        <button type="button" id="active-button">Active</button>
        <button type="button" id="hide-button">Hide</button>
      </div>
    </body>
    </html>

我添加2个随机移动路径的原因是因为它是从我从插图画家保存的svg图像看起来的html，我知道它不应该是必要的但是作为svg显示，但是插入一个手写的svg我不认为我会试图模仿它。

我需要使用路径，因为我想要将圆圈设置为动画，就像标记正在增长一样。为了动画点我无法使用图像方法，我将不得不使用路径并为路径设置动画。

为什么插入那种风格的SVG不起作用？这是一个谷歌地图的东西/ JavaScript的东西？我应该尝试使用snap或d3吗？

任何想法都会很棒，因为我无法理解为什么它拒绝显示路径（或任何其他形状）：）

Answer 1

我不知道我是否意外删除了它，但是用户说我没有在我的SVG的createElement之后放置NS。他们是对的。如果我不小心删除了我的错，如果你发布了，我会告诉你注意我的愚蠢错误的好处 - 非常感谢!!

使用Javascript插入时，SVG路径不会显示

1 个答案: