0

我一直在努力使用谷歌地图 API。

我想要的是在加载地图后添加新的标记。

我可以添加标记，但信息窗口没有启动。

<html>
<heads>
<style>
html, body, #map {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#infowindow{
  padding: 10px;
}
</style>
<script>

var map;
var myLatLng = {lat: 51.197263, lng: 4.399279};
var myZoom = 8;
var geocoder;
var infowindow = new google.maps.InfoWindow();
function initMap() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            myLatLng = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            myZoom = 15;
            createmap(myLatLng);
            addMeToMap("F0FF00", "Uw locatie", myLatLng);
        }, function (error) {
            if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
                myLatLng = {
                    lat: parseFloat(document.getElementById("GeoLat").value),
                    lng: parseFloat(document.getElementById("GeoLng").value)
                };
                myZoom = 15;
            };
            createmap(myLatLng);
            }
        );
    } else {
        createmap(myLatLng);
    };
};

function createmap(pos) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: myZoom,
        center: pos
    });
    addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
    addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
    addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
    addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
    addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
    addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
    addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
    addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
    addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
    addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
    addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
    addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
    addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
    addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
    addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
    addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
    addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
    addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
    addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
    addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
    addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
    addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
    addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
    addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
    addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
    addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
    addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
    addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
};

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: {
            lat: parseFloat(Lat),
            lng: parseFloat(Lng)
        },
        map: map,
        icon: pinImage,
        title: Title
    });

    google.maps.event.addListener(marker, 'click', function () {
        //infowindow.close(); // Close previously opened infowindow
        infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
        infowindow.open(map, marker);
    });

};

function addMeToMap(Color, Title, Pos) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: Pos,
        map: map,
        icon: pinImage,
        title: Title
    });
};

</script>

</head>

<body>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

</body>

</html>

这实际上是在添加引脚，但点击功能不起作用。

小旁注：如果我在该initMap部分中调用所有这些，它可以工作，但这不是我的解决方案，因为我想在加载地图后添加标记。

4

2 回答 2

1

我在发布的代码中收到一个 javascript 错误：Uncaught ReferenceError: google is not defined在这一行：

var infowindow = new google.maps.InfoWindow();

由于您正在异步加载 Google Maps Javascript API v3，所有对 API 对象的引用必须在回调函数 ( initMap) 内或在API 加载并运行后使用。

infowindow在函数内部移动变量的初始化initMap：

var infowindow;
function initMap() {
    infowindow = new google.maps.InfoWindow();
    // ... rest of initMap function

概念证明小提琴

结果地图的屏幕截图

代码片段：

var map;
var myLatLng = {
  lat: 51.197263,
  lng: 4.399279
};
var myZoom = 8;
var geocoder;
var infowindow;

function initMap() {
  infowindow = new google.maps.InfoWindow();
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      myLatLng = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      myZoom = 15;
      createmap(myLatLng);
      addMeToMap("F0FF00", "Uw locatie", myLatLng);
    }, function(error) {
      if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
        myLatLng = {
          lat: parseFloat(document.getElementById("GeoLat").value),
          lng: parseFloat(document.getElementById("GeoLng").value)
        };
        myZoom = 15;
      };
      createmap(myLatLng);
    });
  } else {
    createmap(myLatLng);
  };
};

function createmap(pos) {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: myZoom,
    center: pos
  });
  addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
  addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
  addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
  addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
  addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
  addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
  addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
  addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
  addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
  addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
  addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
  addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
  addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
  addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
  addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
  addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
  addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
  addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
  addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
  addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
  addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
  addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
  addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
  addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
  addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
  addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
  addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
  addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
  map.fitBounds(bounds);
};

var bounds;

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
  var pinColor = Color;
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

  var marker = new google.maps.Marker({
    position: {
      lat: parseFloat(Lat),
      lng: parseFloat(Lng)
    },
    map: map,
    icon: pinImage,
    title: Title
  });
  if (!bounds) bounds = new google.maps.LatLngBounds();
  bounds.extend(marker.getPosition());
  google.maps.event.addListener(marker, 'click', function() {
    //infowindow.close(); // Close previously opened infowindow
    infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
    infowindow.open(map, marker);
  });

};

function addMeToMap(Color, Title, Pos) {
  var pinColor = Color;
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

  var marker = new google.maps.Marker({
    position: Pos,
    map: map,
    icon: pinImage,
    title: Title
  });
};
html,
body,
#map {
  height: 95%;
  margin: 0px;
  padding: 0px;
}

#infowindow {
  padding: 10px;
}
<input type="button" onclick="addToMap('FF0000','M1','Marker 1','',map.getCenter().lat(),map.getCenter().lng());" value="red marker" /><input type="button" onclick="addToMap('0000FF','M2','Marker 2','',map.getCenter().lat(),map.getCenter().lng());" value="blue marker"
/>
<input id="GeoLat" /><input id="GeoLng" />
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

于 2018-08-02T10:40:48.120 回答
0

google.maps.InfoWindow()在页面加载时未加载，您可以在设置 google maps API 后设置并在回调函数中定义它，也可以使用$.ready().

<html>
<heads>
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}

#infowindow{
padding: 10px;
}
</style>
<script>

var map;
var myLatLng = {lat: 51.197263, lng: 4.399279};
var myZoom = 8;
var geocoder;
var infowindow = null;  // You'll get ReferenceError: google is not defined as lib is not loaded yet
function initMap() {
    infowindow = new google.maps.InfoWindow(); // set infowindow on call back function
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            myLatLng = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            myZoom = 15;
            createmap(myLatLng);
            addMeToMap("F0FF00", "Uw locatie", myLatLng);
        }, function (error) {
            if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
                myLatLng = {
                    lat: parseFloat(document.getElementById("GeoLat").value),
                    lng: parseFloat(document.getElementById("GeoLng").value)
                };
                myZoom = 15;
            };
            createmap(myLatLng);
            }
        );
    } else {
        createmap(myLatLng);
    };
};

function createmap(pos) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: myZoom,
        center: pos
    });
    addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
    addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
    addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
    addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
    addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
    addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
    addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
    addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
    addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
    addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
    addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
    addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
    addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
    addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
    addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
    addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
    addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
    addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
    addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
    addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
    addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
    addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
    addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
    addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
    addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
    addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
    addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
    addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
};

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: {
            lat: parseFloat(Lat),
            lng: parseFloat(Lng)
        },
        map: map,
        icon: pinImage,
        title: Title
    });

    marker.addListener('click', function () { // You can add click listener to marker directly.
        //infowindow.close(); // Close previously opened infowindow
        infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
        infowindow.open(map, marker);
    });

};

function addMeToMap(Color, Title, Pos) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: Pos,
        map: map,
        icon: pinImage,
        title: Title
    });
};

</script>

</head>

<body>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

</body>

</html>

编辑：jsfiddle

于 2018-08-02T08:30:21.833 回答