简体   繁体   English

JavaScript函数无法运行

[英]Javascript function doesn't run

I have a java-script function that doesn't want to run. 我有一个不想运行的Java脚本功能。 The weird thing is that other functions in the code run fine. 奇怪的是代码中的其他功能运行良好。 The function I'm having trouble with is addMarkers(). 我遇到的功能是addMarkers()。 I even went so far as to copy the addMarker() function and then change the name. 我什至可以复制addMarker()函数,然后更改名称。 When I call addMarker() it runs perfectly but when I call addMarkers() it doesn't work at all despite being the same thing and being right next to the other one. 当我调用addMarker()时,它运行完美,但是当我调用addMarkers()时,尽管是同一事物并且紧挨着另一个,但它根本无法工作。

What am I missing? 我想念什么?

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 document that runs the script 运行脚本的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>

Your script, as it is, works for me(sometimes). 实际上,您的脚本对我有用(有时)。

The issue: you have two functions that will be called onload( addMarkers and initialize ). 问题:您有两个函数称为onload( addMarkersinitialize )。

But addMarkers will only run successfully when it will be called after initialize (otherwise map will be undefined). 但是addMarkers initialize 调用它时才能成功运行(否则, map将是未定义的)。

As you don't have any control over the execution-order of both functions, you better move the call of addMarkers to the end of initialize . 由于你没有过的两种功能的执行顺序的任何控制,你最好的呼叫转移addMarkers在2002年底initialize

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM