Question

我是初学者，正在玩Javascript和GMAPS API v3。首先，地图正在加载到我的页面，但是当我在同一页面上创建表单以便用户提供坐标时，单击提交按钮时，地图应该加载。现在我注意到两件事： 1）不断给出错误： TypeError：s为null https://maps.gstatic.com/mapfiles/api-3/17/13/main.js 2）API正确加载，但未显示地图。

我的JavaScript：

var marker;
var mapProp;
var map;
var myCenter;

function initialize() {

    mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

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

    marker = new google.maps.Marker({
        position: myCenter,
    });

    marker.setMap(map);
}

function pan() {
    myCenter = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value);

    map.panTo(myCenter);
}

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

我的HTML：

<div id="googleMap"></div>
<form method="get">
    <fieldset>
        <legend>Redirect to:</legend>
        <label for="latitude">Latitude:</label>
        <input type="text" id="latitude">
        <br>
        <label for="longitude">Longitude:</label>
        <input type="text" id="longitude">
        <br>
        <button id="submit" onclick="pan()">Submit</button>
    </fieldset>
</form>

我的CSS文件：

#googleMap {
    width: 800px;
    height: 600px;
    border: 2px solid black;
}
fieldset {
    display: block;
    width: 450px;
    border: 2px solid black;
    position: fixed;
    top: 5px;
    right: 5px;
}
legend {
    padding: 0.2em 0.5em;
    border:1px solid black;
    color:black;
    font-size:90%;
    text-align:right;
}
label {
    float:left;
    width:25%;
    margin-right:0.5em;
    padding-top:0.2em;
    text-align:right;
    font-weight:bold;
}
#submit {
    position: relative;
    margin-top: auto;
    margin-left: 63%;
}

Answer 1

创建地图对象时需要定义中心点。
不要使用<form>和submit按钮，而是将事件监听器绑定到按钮。

例如：

var button = document.getElementById("panButton");
button.addEventListener("click", pan);

工作示例：

JSFiddle demo

希望这有帮助。

Google Maps API未将地图加载到页面

1 个答案: