0

我有一个不想运行的 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>
4

1 回答 1

0

您的脚本实际上对我有用（有时）。

问题：您有两个将被称为 onload(addMarkers和initialize) 的函数。

但是addMarkers只有在它被调用之后 initialize才会成功运行（否则map将是未定义的）。

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

于 2013-06-16T12:00:44.290 回答