谷歌地图：标记不会出现？

"use strict"; // eslint-disable-line


var map;
var initialLocation;
// TODO: Initialize and display Google Map
function initialize() {
    //get current location


  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new         google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  }

var mapProp = {
center:initialLocation,
zoom:6,
    mapTypeId:google.maps.MapTypeId.ROADMAP
      };

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

var marker = new google.maps.Marker({
          position: initialLocation,
          map: map
        });


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

I am trying to set a marker to my current location using Javascript. When I load the map, however, while the map will center on my current location, no marker will appear?

我正在尝试使用Javascript将标记设置到我当前的位置。但是,当我加载地图时,地图将以我当前位置为中心,是否会显示标记?

2 个解决方案

#1

Everything looks good, just add marker.setPosition(initialLocation); in the following section:

一切看起来都不错,只需添加marker.setPosition(initialLocation);在以下部分中:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    marker.setPosition(initialLocation);// ****** missing line ******
    map.setCenter(initialLocation);
  }, function() {
    handleNoGeolocation(browserSupportFlag);
  });
};

Here is a working JSFiddle with the necessary changes.

这是一个有效的JSFiddle,它有必要的变化。

The key is from a Google MAP API sample and will need to be updated with your own, which you can obtain here: Google MAP API.

关键是来自Google MAP API示例,需要使用您自己的更新,您可以在此处获取:Google MAP API。

You may need to reload the JSFiddle example, as there appears to be an issue with the async defer coming from googleapis file. Wait a few seconds and press RUN.

您可能需要重新加载JSFiddle示例,因为来自googleapis文件的async延迟似乎存在问题。等几秒钟然后按RUN。

#2

Just make sure the content of variable initialLocation. If it has the correct lon/lat, marker will appear. You have to make sure it has correct value before the following: var marker = new google.maps.Marker({ position: initialLocation, map: map });

只需确保变量initialLocation的内容。如果它具有正确的lon / lat,则会出现标记。您必须确保它具有以下之前的正确值:var marker = new google.maps.Marker({position:initialLocation,map:map});

#1