时间戳

首页 > 解决方案 > 更新谷歌地图经度/纬度

javascript - 更新谷歌地图经度/纬度

问题描述

我正在尝试通过获取谷歌地图上标记的纬度/经度来更新商店位置。但是我收到此错误：

UpdateStoreDAO.js:7 Uncaught TypeError: Cannot read property 'getPosition' of undefined
    at updateItemData (UpdateStoreDAO.js:7)
    at UpdateStore.js:68
    at IDBOpenDBRequest.request.onsuccess (indexedDB.js:38)

我不太确定为什么它不起作用，因为 getPosition 用于将商店位置添加到地图以作为标记。它使用与我的添加页面相同的 Google Maps API，并且添加页面从未向我抛出此错误。

更新函数（DAO）的代码是：

function updateItemData(marker) {
    //User input of item name
    var storeLocation = $('#txtStoreLocation').val();
    //Get latitude and longitude of current marker position
    var eventLat = marker.getPosition().lat();
    var eventLng = marker.getPosition().lng();

    //Create an item object combining name, desc and price attributes
    data.storeLocation = storeLocation;
    data.eventLat = eventLat;
    data.eventLng = eventLng;

    var data = {
        'storeLocation' : storeLocation,
        'eventLat' : eventLat,
        'eventLng' : eventLng
    }

    //Insert data into indexedDB database
    updateOne(data, function(lastID) {
        event.preventDefault();
        return false;
    });
}

更新存储 js 文件的代码是（如果有帮助的话）：

//mapCenter 
var mapCenter = new google.maps.LatLng(51.8979988098144,-2.0838599205017);
//geocoder will be used to convert geographic coordinates (current marker position)
// intop a human-readable address
var geocoder = new google.maps.Geocoder();
//An InfoWindow displays content (usually text or images)
//in a popup window above the map, at a given location.
var infowindow = new google.maps.InfoWindow();

function initialize(){
    // Initial map properties
    var mapOptions = {
        zoom: 15,
        center: mapCenter
    };

    //Create a map object passing the html div placeholder to hold google map
    myMap = new google.maps.Map(document.getElementById("mapInput"), mapOptions);

    //Create a draggable marker icon in the map
    marker = new google.maps.Marker({
        map: myMap,
        position: mapCenter,
        draggable: true
    });
}

//Retrieve Item information saved in database 
//show in the form
var urlParams = new URLSearchParams(window.location.search);
var itemID = urlParams.get('itemID');
$('#itemID').html("Item ID: " + itemID);

setDatabaseName('dbCatalogue', ['UsersObjectStore', 'ItemsObjectStore']);
setCurrObjectStoreName('ItemsObjectStore');
//Select One function to retrieve data of a specific item
var data;
startDB(function () {
    selectOne(itemID, function(result) {
        $('#txtStoreLocation').val(result.storeLocation);
        $('#txtEventLat').val(result.eventLat);
        $('#txtEventLng').val(result.eventLng);
        data = result;
    })
})



//The addDomListener will be triggered when the HTML page is loaded
//and will execture the initialize function above
google.maps.event.addDomListener(window, 'load', initialize);

//Event handler for form submit button
$('#formUpdateStore').submit(function(event){

    // cancels the deafult form submission and handle the event from javascript
    event.preventDefault();

    //Create an idexedDB database (the name of the database is dbFlogger) 
    // with two object stores - UsersObjectStore to store user data 
    // and ItemsObjectStore to store item data
    setDatabaseName('dbEvent', ['EventObjStore']);
    // For this example, we will store data in ItemsObjectStore
    setCurrObjectStoreName('EventObjStore');
    //startDB will create a connection with the database and
    //execute operations such as save item
    startDB(function () {
        updateItemData(data);
        alert("Store has been updated successfully!");
    });
});

我知道这可能有很多问题，但任何帮助将不胜感激！（注意 = 注释有点偏离，因为代码已从其他页面重用）

标签： javascripthtmlweb

解决方案

===更新===

我通过在常规文件中更改updateItemData(data)为来修复错误。updateItemData(marker)js

但是，我现在收到一个新错误：

Uncaught TypeError: Cannot set property 'storeLocation' of undefined
at updateItemData (UpdateStoreDAO.js:11)
at UpdateStore.js:68
at IDBOpenDBRequest.request.onsuccess (indexedDB.js:38)

我不太清楚为什么我storeLocation会按照定义得到这个并且有一个通过用户输入设置的属性？

推荐阅读