Question

尝试从googleapi获取地图，在firebug中返回网络错误：

"NetworkError: 404 Not Found - http://localhost:15618/Home/https//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=MY_KEY"

联系人视图中的源代码：

<script type="text/javascript" src="https//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=MY_KEY"></script>

@section Scripts {

    function initialize() {

        var canvas = $("#map_canvas");

        var latitude = 30.3296604;
        var longitude = -97.8743174;

        var latlng = new google.maps.LatLng(latitude, longitude);
        var options = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(canvas[0], options);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(latitude, longitude),
            map: map
        });
    }

    $(function () { //Same as $(document).ready()
        initialize();
    });

</script> }

我曾尝试在BundleConfig.cs中使用CDN，但没有结果

bundles.UseCdn = true;
BundleTable.EnableOptimizations = true; //force optimization while debugging

var jquery = new ScriptBundle("~/bundles/jquery", "https//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyALDo0MgNC8vRSNN3It38Yo9L_g8_8GoqM").Include(
        "~/Scripts/jquery-{version}.js");
bundles.Add(jquery);

Answer 1

这是一个有效的解决方案。

现场演示： http://jsbin.com/ruyaxidi/1

Address : <input id="Address" /><button id="ViewMap">Show Map</button>
<div id="map_canvas" style="height:400px; top:30px ;position:relative"></div>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script>
      document.getElementById("ViewMap").onclick = function f() {
            initialize();
        }

      </script>

    <script>
    var geocoder;
    var map;
    var mapOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var marker;

    function initialize() {
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        codeAddress();
    }
    function codeAddress() {
        var address = document.getElementById('Address').value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                if (marker)
                    marker.setMap(null);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    draggable: true
                });
                google.maps.event.addListener(marker, "dragend", function () {
                    document.getElementById('lat').value = marker.getPosition().lat();
                    document.getElementById('lng').value = marker.getPosition().lng();
                });
                document.getElementById('lat').value = marker.getPosition().lat();
                document.getElementById('lng').value = marker.getPosition().lng();
            } else {
                document.getElementById("Address").placeholder = ("Map not set!");
            }
        });
    }
    </script>

ASP.NET MVC5 Googlemaps

1 个答案: