Question

我尝试使用我在inedexedDB上放置的数据在Google地理位置地图API上放置标记。我可以使用从数据库中获取的数据准确地放置标记，但是标记符号是＆＃39; infowindow没有准确地得到它们。

这是我的代码：

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multiple Markers</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <style type="text/css">
      #map {
        width: 700px;
        height: 700px;
      }
    </style>
</head> 
<body>
    <div id="map"></div>
    <button onclick="showMarker()">Show Markers </button>

  <script type="text/javascript">
         //prefixes of implementation that we want to test
         window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

         //prefixes of window.IDB objects
         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

         if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB.")
         }
         var db;
         var request = window.indexedDB.open("mapDB", 1);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: new google.maps.LatLng(11.980433, 121.918866),
          mapTypeId: google.maps.MapTypeId.HYBRID
        });

         const locData = [
            { id: "00-01", name: "Boracay", lat: 11.980433, lng: 121.918866 },
            { id: "00-02", name: "Baguio City", lat: 16.402333, lng: 120.596007 },
            { id: "00-03", name: "Isdaan", lat: 15.475479, lng: 120.596349 },
            { id: "00-04", name: "Mount Pinatubo", lat: 15.142973, lng: 120.349302 }
         ];

         request.onerror = function(event) {
            console.log("error: ");
         };

         request.onsuccess = function(event) {
            db = request.result;
            console.log("success: "+ db);
         };

         request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("location", {keyPath: "id"});

            for (var i in locData) {
               objectStore.add(locData[i]);
            }

            db.onsuccess = function(event) {
                showMarker();
            };
         }

         function showMarker() {
            var infowindow = new google.maps.InfoWindow();
            var marker, i;

            var objectStore = db.transaction("location").objectStore("location");

            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;

               if (cursor) {
                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cursor.value.lat, cursor.value.lng),
                        map: map
                      });

                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                          infowindow.setContent(cursor.value.name);
                          infowindow.open(map, marker);
                        }
                      })(marker, i));
                  cursor.continue();
               }
            };
         }
  </script>
</body>
</html>

我尝试过搜索和阅读其他来源，但我似乎无法找到问题所在。非常感谢帮助。

Answer 1

这是Google Maps JS API v3 - Simple Multiple Marker Example的副本。您需要在标记的名称上进行功能关闭。

function showMarker() {
  var infowindow = new google.maps.InfoWindow();
  var marker;

  var objectStore = db.transaction("location").objectStore("location");

  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(cursor.value.lat, cursor.value.lng),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, name) {
        return function() {
          infowindow.setContent(name);
          infowindow.open(map, marker);
        }
      })(marker, cursor.value.name));
      cursor.continue();
    }
  };
}

proof of concept fiddle

从indexedDB获取游标的值

1 个答案: