Javascript 剑道用户界面和谷歌地图

我的问题相对简单，但在过去的几个小时里，我一直在努力想出一个解决方案。您可以看到，首先加载澳大利亚地图，然后切换到加载美国地图。我使用Google Maps API V3中的普通中心函数

var myCenter=new google.maps.LatLng(41.850033, -87.650052);

---

该位置在加载澳大利亚位置后加载。如果有任何提示，我将不胜感激。

这个问题与

mapMarker.js

有关，在初始化过程中，它会创建一个新的谷歌地图并将位置居中。如果您注意代码：

function initializeMap(){
    geocoder = new google.maps.Geocoder();
    var mapProp = {
        center:myCenter,
        zoom:5,
        //disableDefaultUI:true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"),mapProp);

    setMarkers(map);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);  
    });
}

您可以看到它调用了

google.maps.Map

并将其放置在HTML元素

Map\u画布中

删除您的移动应用程序布局，但它还将

center

定义为美国的

myCenter

您应该检查如何初始化它。我的建议是将您的

mapMarker.js

替换为：

var image = new google.maps.MarkerImage(
    'house.png',
    new google.maps.Size(32,37),    // size of the image
    new google.maps.Point(0,0), // origin, in this case top-left corner
    new google.maps.Point(16, 18)    // anchor, i.e. the point half-way along the bottom of the image
);

function setMarkers(map) {
    // Add markers to the map
    // address, lat und lng lokal speichern und abrufen, so dass leads nicht verloren gehen
    latArr = $.jStorage.get("latKey");
    lngArr = $.jStorage.get("lngKey");
    compAddressArr = $.jStorage.get("addressKey");
    // beim ersten Test gibt es die Arrays noch nicht, deshalb einen Wert geben
    if (latArr == null && lngArr == null && compAddressArr == null) {
        latArr = ["workaround"];
        lngArr = ["workaround"];
        compAddressArr = ["workaround"];
    }
    else {
        // wenn die Variablen schon gefuellt sind und mehr als einen Eintrag haben, weil der erste ein workaround ist, dann einen marker auf die map zeichnen
        var amount2 = latArr.length;
        console.log(amount2);
        console.log(lngArr);
        console.log(latArr);
        console.log(compAddressArr);
        if (amount2 > 1) {
            for (var i = 1; i < amount2; i++ ) {
                // marker/lead zeichnen
                var myLatLng = new google.maps.LatLng(latArr[i], lngArr[i]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    title: compAddressArr[i],
                });
                var infowindowString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Chris Breuer</h1>'+
                    '<div id="bodyContent">'+
                    '<p><b>Phone Number</b>: (808)218-8241 <br>' +
                    '<p><b>Notes</b>:  Uluru, also referred to as Ayers Rock, is a large sandstone rock formation in the southern part of the Northern Territory, central Australia. Some random customer info here</p> '+
                    '<p><b>Address: </b>'+compAddressArr[i]+
                    '</p>'+
                    '</div>'+
                    '</div>';

                var infowindow = new google.maps.InfoWindow({
                    content: infowindowString
                });
                // so dass man das Fenster oefters oeffnen kann
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }
        }
    }
}


function placeMarker(map, location) {
    var lat = location.lat();
    var lng = location.lng();

    var latlng = new google.maps.LatLng(lat, lng);

    // This is making the Geocode request
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK) {
            alert(status);
        }
        // This is checking to see if the Geoeode Status is OK before proceeding
        if (status == google.maps.GeocoderStatus.OK) {
            var address = (results[0].formatted_address);
            var addressArr = address.split(",");
            console.log(addressArr);
            var street = addressArr[0].trim();
            var city = addressArr[1].trim();
            var zipState = addressArr[2].trim();
            var state = zipState.trim().substr(0,2);
            var zip = zipState.trim().substr(3,8);
            var country = addressArr[3] ? addressArr[3].trim() : "N/A";
            var completeAddress = street+" "+city+" "+state+" "+zip+" "+country;
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                icon: image,
                title: completeAddress,
            });

            var infowindowString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Chris Breuer</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Phone Number</b>: (808)218-8241 <br>' +
                '<p><b>Notes</b>:  Uluru, also referred to as Ayers Rock, is a large sandstone rock formation in the southern part of the Northern Territory, central Australia. Some random customer info here</p> '+
                '<p><b>Address</b>'+completeAddress+
                '</p>'+
                '</div>'+
                '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: infowindowString
            });
            // so dass man das Fenster oefters oeffnen kann
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
            // address, lat und lng sind gleiche Anzahl, deshalb nur eine amount
            // localStorage nutzen und in Array speichern
            var amount = latArr.length;
            compAddressArr[amount] = completeAddress;
            latArr[amount] = lat;
            lngArr[amount] = lng;
            console.log(latArr);
            console.log(lngArr);
            console.log(compAddressArr);
            $.jStorage.set("latKey", latArr);
            $.jStorage.set("lngKey", lngArr);
            $.jStorage.set("addressKey", compAddressArr);
        }
    });
}

---

非常感谢您的回复。这就是我需要的答案。它现在可以在我的localost上正常工作，没有任何问题，但是一旦我将它上传到这个Web空间，我就会收到错误消息uncaughtsyntaxerror:Unexpected token invalique on this line google.maps.event.addListener（map，'click'，function（event）{

//initialize the google map
function buildMap(e) {
    var myOptions = {
        center   : new google.maps.LatLng(-34.397, 150.644),
        zoom     : 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var mapElement = $("#map_canvas");
    var container = e.view.content;

    var map = new google.maps.Map(mapElement[0], myOptions);

    setMarkers(map);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
    });
}