Question

我正在循环浏览一些JSON文件，并使用JSON文件中的地址作为谷歌地图。我知道地址工作正常，因为我设置了一个警告来显示变量，它显示了我的期望。对地图的调用是在单击函数内。在一个虚拟页面上，我有一个客户列表，当用户点击该客户时，它会重定向到另一个虚拟页面以显示该客户信息，并带有显示其地址的地图。当我第一次这样做时，它有效。如果我单击后退，则选择其他客户，地图只是灰色。知道为什么会这样吗？

这是我的点击功能..

function cHandle(num) {
                    $("#custSpan" + i).on("click", function () {
                            window.location.href = "#CustInv";
                            custName = customer.Customer[num].compName;
                            $("#CustInvHead").html(custName);
                            $("#invoiceh2").html(custName + "'s Invoices");
                            $("#custInfo").empty();
                            $("#invoice").empty();
                            $("#map-canvas").empty();   
                            var inc = customer.Customer[num].compId;
                            $("#custInfo").append("Customer ID: " + customer.Customer[num].compId + "<br /><br />"
                                +"Customer Name: " + custName + "<br /><br />"
                                +"Customer Address: " + customer.Customer[num].compAddress + "<br /><br />"
                                +"Customer Contact: " + customer.Customer[num].compContact + "<br /><br />"
                                +"Customer Phone: <a href=\"tel:" + customer.Customer[num].compPhone + "\">" + customer.Customer[num].compPhone + "</a><br/ ><br />"
                                + "Customer Email: <a href=\"mailto:" + customer.Customer[num].compEmail + "\">" + customer.Customer[num].compEmail + "</a>"

                                );
                            address = customer.Customer[num].compAddress;
                            //alert(address);
                            codeAddress();
})
                }
                cHandle(i);

这是我的地图......

function success(pos) {
            lat = pos.coords.latitude;
            lng = pos.coords.longitude;
            drawMap();
        }

        function error(err) {
            alert("Error " + err.code + " : " + err.message);
        }
        ;

        function codeAddress() {
            lat = 0;
            lng = 0;

            //Get the address
            //address = "123 Fake St";
            if (address == "") {
                alert("No Address Entered");
                return;
            }
                //Change address to coordinates to plot on map
            else {
                geocoder = new google.maps.Geocoder();
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var myLatLng = results[0].geometry.location;
                        lat = results[0].geometry.location.lat();
                        lng = results[0].geometry.location.lng();
                        drawMap();
                    }
                    else {
                        alert("Geocode was not successful for the following reason: " + status);
                        return;
                    }
                })
            }
        }
        function drawMap() {
            mapCenter = new google.maps.LatLng(lat, lng);
            var mapOptions = {
                center: mapCenter,
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            //Display the address
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            //Map Marker
            var myLoc = new google.maps.Marker({
                map: map,
                animation: google.maps.Animation.DROP,
                position: mapCenter
            });

Answer 1

您可以多次调用地图的创建，因为您应该调用一次（初始化）地图并多次调用创建标记的功能。

将drawMap中的代码拆分为两个

首先在顶层（窗口）级别（函数外部）声明var map 并初始化你的地图 var map

    function initialize() {
        mapCenter = new google.maps.LatLng(lat, lng);
        var mapOptions = {
            center: mapCenter,
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        //Display the address
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);


    google.maps.event.addDomListener(window, 'load', initialize);

</script>

第二个在codeAddress（）函数中只调用创建标记函数

 function createMarker() {

    var myLoc = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: mapCenter
        });
 }

第二次被叫时，谷歌地图是灰色的

1 个答案: