Question

我有一个不想运行的java脚本函数。奇怪的是代码中的其他函数运行良好。我遇到问题的功能是addMarkers（）。我甚至甚至复制了addMarker（）函数，然后更改了名称。当我调用addMarker（）时，它运行得很完美，但是当我调用addMarkers（）时，它根本不起作用，尽管它是相同的东西并且紧挨着另一个。

我错过了什么？

var markers = [];

var map;
function initialize() {

    var mapOptions = {
        zoom : 2,
        center : new google.maps.LatLng(0, 0),
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

// Removes the overlays from the map, but keeps them in the array.
function clearOverlays() {
    setAllMap(null);
}

// Shows any overlays currently in the array.
function showOverlays() {
    setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteOverlays() {
    clearOverlays();
    markers = [];
}

function resetMap() {
    map.panTo(new google.maps.LatLng(0, 0));
    map.setZoom(2);

    deleteOverlays();
}


function addMarker(lat, lng) {

    markers.push(new google.maps.Marker({
        position : new google.maps.LatLng(lat, lng),
        map : map,
        draggable : false,
        animation : google.maps.Animation.DROP
    }));
}


function addMarkers(lat, lng) {

    markers.push(new google.maps.Marker({
        position : new google.maps.LatLng(lat, lng),
        map : map,
        draggable : false,
        animation : google.maps.Animation.DROP
    }));
}

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

运行脚本的HTML文档

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps API Testing</title>
    <!--meta http-equiv="refresh" content="120"-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: #B0C4DE;
      }
      #map-canvas{
        height:1020px;
        width:1040px;
        border: 5px black solid;
        position:absolute;
        top:100px;
        left: 5px;
      }
      form{
        position:relative;
        left: 20px;
        top: 15px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?Key={AIzaSyBLp3nQtaofsWbtwTH4rwgOoPJ8fARnUPA}&sensor=false"></script>
     <script type="text/javascript" src="maps.js"></script>

  </head>
  <body onload="addMarkers(0,0)">

    <div id="map-canvas"></div>
    <form name="form">
        <input type="button" value="Reset Map" onclick="resetMap();" />

        <br />
        Lat: <input type="number" name="lat"/>
        Lng: <input type="number" name="lng" />
        <br />
        <input type="button" value="Drop Icon" onclick="addMarker(form.lat.value, form.lng.value);" />
    </form>
  </body>
</html>

Answer 1

您的脚本本身适用于我（有时）。

问题：您有两个函数称为onload（addMarkers和initialize）。

但addMarkers只有在 initialize之后被称为时才会成功运行（否则map将被取消定义）。

由于您无法控制两个函数的执行顺序，因此最好将addMarkers的调用移至initialize的末尾。

Javascript函数无法运行

1 个答案: