使用对象文字更新标记上的图标

Update Icon on a Marker with a Object literal

本文关键字:图标 更新 对象 文字      更新时间:2023-09-26

由于MarkerImage不见了,我在更新Marker的Icon时经常遇到这个问题。

对Marker.setIcon({url:"icon-url",anchor:……})的第一次调用可以正常工作,但当我尝试用相同的Object文字在同一个标记上创建setIcon时,它会在调试器中引发此异常:

<exception>: Af
message: "not a string"
name: "InvalidValueError"
stack: "Error↵ at Error (native)↵ at new Af (http://maps.googleapis.com/maps-api-v3/api/js/21/10/intl/de_ALL/main.js:26:682)↵ at Bf (http://maps.googleapis.com/maps-api-v3/api/js/21/10/intl/de_ALL/main.js:26:795)↵ at http://maps.googleapis.com/maps-api-v3/api/js/21/10/intl/de_ALL/main.js:28:60↵ at http://maps.googleapis.com/maps-api-v3/api/js/21/10/intl/de_ALL/main.js:28:181↵ at http://maps.googleapis.com/maps-api-v3/api/js/21/10/intl/de_ALL/main.js:28:401↵ at Zh.setIcon (http://maps.googleapis.com/maps-api-v3/api/js/21/10/intl/de_ALL/main.js:31:1423)↵ at $setIcon_6 (0.js:59576:15)↵ at $update_10 (0.js:98065:3)↵ at $liveTimerFireEvent (0.js:113687:7)"
__proto__: c
c: Object
anchor: U
origin: U
size: W
url: "resources/image.png"
__proto__: Object
this: undefined

很明显,我使用的是21/10版本有人有类似的问题吗?我很快用一个字符串而不是一个图标的对象来测试它,它的工作原理是这样的。。。

因为在我有机会说这不是简单的js之前,人们就否决了我的问题。。。这里是未提取的示例。。。

    /*
     * declare map as a global variable
     */
    var map;
    /*
     * use google maps api built-in mechanism to attach dom events
     */
    google.maps.event.addDomListener(window, "load", function () {
      /*
       * create map
       */
      var map = new google.maps.Map(document.getElementById("map_div"), {
        center: new google.maps.LatLng(33.808678, -117.918921),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      /*
       * create infowindow (which will be used by markers)
       */
      var infoWindow = new google.maps.InfoWindow();
      /*
       * marker creater function (acts as a closure for html parameter)
       */
      function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        if (html) {
          google.maps.event.addListener(marker, "click", function () {
            infoWindow.setContent(html);
            infoWindow.open(options.map, this);
          });
        }
        return marker;
      }
      /*
       * add markers to map
       */
      var marker0 = createMarker({
        position: new google.maps.LatLng(33.808678, -117.918921),
        map: map,
        icon: { url :  "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png" }
      }, "<h1>Marker 0</h1><p>This is the home marker.</p>");
      var marker1 = createMarker({
        position: new google.maps.LatLng(33.818038, -117.928492),
        map: map
      }, "<h1>Marker 1</h1><p>This is marker 1</p>");
      var marker2 = createMarker({
        position: new google.maps.LatLng(33.803333, -117.915278),
        map: map
      }, "<h1>Marker 2</h1><p>This is marker 2</p>");
        
        setInterval(function(){ marker0.setIcon({ url :  "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png" }); alert("called");}, 3000);
    });
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>

而不是指定您的图标,如:

marker0.setIcon({ url :  "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png" });

只需直接使用URL,而不是作为传递给setIcon的结构的属性。这对我来说很有效,没有抛出错误:

marker0.setIcon("http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png");