适当地呈现和重新加载自定义 Google 地图标记

Question

我不确定这是我在做某事还是需要解释的基本问题。基本上我正在做的是刷新下面地图中的标记，这些标记在单击按钮后包含在数组中（按钮元素 id 是 "reloadMarkers"）

我在控制台中收到以下错误：类型错误：无法读取未定义的属性 'length' 在设置标记处在 initMap

此外，我定义的标记实际上并未填充在地图上？

我认为这很简单我做错了，但我看不到任何其他类似的问题处理像这样的自定义标记而且我对 Google 地图 API/javascript 比较陌生，所以问题可能出在我身上？

下面的代码是我正在使用的：

<script id="mapMarkerPositions">

    var example = {
        info: '<strong>Shepherds Bush Market</strong><br>',
        lat: 51.502500,
        lng: -0.226495,
        type: 'info',
        label: {
            text: '£00.00',
            fontFamily: "Courier, Arial, Helvetica, sans-serif",
        }
    };

    var example2 = {
        info: '<strong>186 uxbridge</strong><br>',
        lat: 51.505333,
        lng: -0.225528,
        type: 'info',
        label: {
            text: '£00.00',
            fontFamily: "Courier, Arial, Helvetica, sans-serif",
        }
    };

    var map;
    var markers = [];
    var merchantMarkers = [
        [example.info, example.lat, example.lng, example.type, example.label, 1],
        [example2.info, example2.lat, example2.lng, example2.type, example2.label, 2]
    ];

    var icons = {
            icon: {
                path: ' M-240 -70 Q -240 -90 -220 -90 L -20 -90 Q 0 -90 0 -70 L 0 -20 Q 0 0 -20 0 L -220 0 Q -240 0 -240 -20 Z',
                fillColor: '#fff',
                fillOpacity: 1,
                scale: 0.3,
                strokeColor: '#555',
                strokeWeight: 2,
                labelOrigin: new google.maps.Point(-120, -46)
            }
        };
</script>

地图设置（紧接在上述脚本之后）：

<script>

    function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
            maxZoom: 20,
            minZoom: 14,
            zoom: 16,
            mapTypeControl: false,
            streetViewControl: false,
            center: {
                lat: 51.507388,
                lng: -0.127734
            }

        });

        setMarkers(merchantMarkers);

        document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);

        var infowindow = new google.maps.InfoWindow({})

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(initialLocation);
            });
        }

    }
</script>

设置标记：

<script>        

function setMarkers(locations) {

for (var i = 0; i < locations.length; i++) {
    var merchant = locations[i];
    var myLatLng = new google.maps.LatLng(merchant[1], merchant[2]);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(merchant[i][1], merchant[i][2]),
                map: map,
                icon: icons.icon,
                label: merchant[i][4]
    })

    google.maps.event.addListener(
                marker,
                'click',
                (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0])
                        infowindow.open(map, marker)
                    }
                })(marker, i)
            )
};

    markers.push(marker);
}

</script>

单击按钮时重新加载标记的功能：

<script>

function reloadMarkers() {

// Loop through markers and set map to null for each
for (var i=0; i<markers.length; i++) {

    markers[i].setMap(null);
}

// Reset the markers array
markers = [];

// Call set markers to re-add markers
setMarkers(merchantMarkers);
}

</script>

最小示例：

#map {
   height: 400px
  }

<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0;">


</head>

<body>


 <script id="mapMarkerPositions">
  var example = {
   info: '<strong>Shepherds Bush Market</strong><br>',
   lat: 51.502500,
   lng: -0.226495,
   type: 'info',
   label: {
    text: '£00.00',
    fontFamily: "Courier, Arial, Helvetica, sans-serif",
   }
  };

  var example2 = {
   info: '<strong>186 uxbridge</strong><br>',
   lat: 51.505333,
   lng: -0.225528,
   type: 'info',
   label: {
    text: '£00.00',
    fontFamily: "Courier, Arial, Helvetica, sans-serif",
   }
  };

  var map;
  var markers = [];
  var merchantMarkers = [
   [example.info, example.lat, example.lng, example.type, example.label, 1],
   [example2.info, example2.lat, example2.lng, example2.type, example2.label, 2]
  ];

  var icons = {
   icon: {
    path: ' M-240 -70 Q -240 -90 -220 -90 L -20 -90 Q 0 -90 0 -70 L 0 -20 Q 0 0 -20 0 L -220 0 Q -240 0 -240 -20 Z',
    fillColor: '#fff',
    fillOpacity: 1,
    scale: 0.3,
    strokeColor: '#555',
    strokeWeight: 2,
    labelOrigin: new google.maps.Point(-120, -46)
   }
  };
 </script>

 <script>
  function initMap() {

   var map = new google.maps.Map(document.getElementById('map'), {
    maxZoom: 20,
    minZoom: 14,
    zoom: 16,
    mapTypeControl: false,
    streetViewControl: false,
    center: {
     lat: 51.507388,
     lng: -0.127734
    }

   });

   setMarkers(merchantMarkers);

   document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);

   var infowindow = new google.maps.InfoWindow({})

   if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
     initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     map.setCenter(initialLocation);
    });
   }

  }
 </script>

 <script>
  function setMarkers(locations) {

   for (var i = 0; i < locations.length; i++) {
    var merchant = locations[i];
    var myLatLng = new google.maps.LatLng(merchant[1], merchant[2]);
    var marker = new google.maps.Marker({
     position: new google.maps.LatLng(merchant[i][1], merchant[i][2]),
     map: map,
     icon: icons.icon,
     label: merchant[i][4]
    })

    google.maps.event.addListener(
     marker,
     'click',
     (function(marker, i) {
      return function() {
       infowindow.setContent(locations[i][0])
       infowindow.open(map, marker)
      }
     })(marker, i)
    )
   };

   markers.push(marker);
  }
 </script>

 <script>
  function reloadMarkers() {

   // Loop through markers and set map to null for each
   for (var i = 0; i < markers.length; i++) {

    markers[i].setMap(null);
   }

   // Reset the markers array
   markers = [];

   // Call set markers to re-add markers
   setMarkers(merchantMarkers);
  }
 </script>

 <div id="map"></div>
 <input type="button" value="Reload markers" id="reloadMarkers">

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBGFYRuVSrhZlIOuQn5BWhNNkggcssFFM&callback=initMap"></script>

</body>

</html>

Answer 1

问题：

Uncaught ReferenceError: google is not defined 这一行：icons 定义中的 labelOrigin: new google.maps.Point(-120, -46)，即 API 加载之前的运行 .这需要在 initMap 函数中，该函数在 API 加载后运行。
Uncaught (in promise) TypeError: Cannot read property 'icon' of undefined 因为上面的错误.
markers.push(marker); 位置错误（它在创建标记的循环之外，因此仅适用于最后创建的标记）。将它移到循环内。

工作代码片段：

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#map {
  height: 90%;
}

<script id="mapMarkerPositions">
  var example = {
    info: '<strong>Shepherds Bush Market</strong><br>',
    lat: 51.502500,
    lng: -0.226495,
    type: 'info',
    label: {
      text: '£00.00',
      fontFamily: "Courier, Arial, Helvetica, sans-serif",
    }
  };

  var example2 = {
    info: '<strong>186 uxbridge</strong><br>',
    lat: 51.505333,
    lng: -0.225528,
    type: 'info',
    label: {
      text: '£00.00',
      fontFamily: "Courier, Arial, Helvetica, sans-serif",
    }
  };

  var map;
  var markers = [];
  var merchantMarkers = [
    [example.info, example.lat, example.lng, example.type, example.label, 1],
    [example2.info, example2.lat, example2.lng, example2.type, example2.label, 2]
  ];

  var icons
</script>

<script>
  function initMap() {
    icons = {
      icon: {
        path: ' M-240 -70 Q -240 -90 -220 -90 L -20 -90 Q 0 -90 0 -70 L 0 -20 Q 0 0 -20 0 L -220 0 Q -240 0 -240 -20 Z',
        fillColor: '#fff',
        fillOpacity: 1,
        scale: 0.3,
        strokeColor: '#555',
        strokeWeight: 2,
        labelOrigin: new google.maps.Point(-120, -46)
      }
    };
    map = new google.maps.Map(document.getElementById('map'), {
      maxZoom: 20,
      minZoom: 14,
      zoom: 16,
      mapTypeControl: false,
      streetViewControl: false,
      center: {
        lat: 51.507388,
        lng: -0.127734
      }
    });

    setMarkers(merchantMarkers);

    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
    document.getElementById('centerOnMarkers').addEventListener('click', centerOnMarkers);
    var infowindow = new google.maps.InfoWindow({})

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(initialLocation);
      });
    }

  }
</script>

<script>
  function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {
      var merchant = locations[i];
      var myLatLng = new google.maps.LatLng(merchant[1], merchant[2]);
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: icons.icon,
        label: merchant[4]
      })

      google.maps.event.addListener(
        marker,
        'click',
        (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0])
            infowindow.open(map, marker)
          }
        })(marker, i))
        markers.push(marker);
    };
  }
</script>

<script>
  function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }

    // Reset the markers array
    markers = [];

    // Call set markers to re-add markers
    setMarkers(merchantMarkers);
  }
</script>
<script>
  function centerOnMarkers() {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
    }
    map.fitBounds(bounds);
  }
</script>
<div id="map"></div>
<input type="button" value="Reload markers" id="reloadMarkers" />
<input type="button" id="centerOnMarkers" value="center on markers" />

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

适当地呈现和重新加载自定义 Google 地图标记

Presenting and Reloading Custom Google Maps Markers Appropriately

javascript

google-maps

google-maps-api-3

google-maps-markers