如何让标记出现在谷歌地图上

Question

我正在尝试让标记显示在谷歌地图上。我已经到过这里的各种 SO 页面。你能告诉我在地图上显示标记的代码吗？

我有这个 Javascript：

function geoFindMe() {
  var output = document.getElementById("latlongdiv");

      if (!navigator.geolocation){
        output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
        return;
      }

      function success(position) {
        var latitude  = position.coords.latitude;
        var longitude = position.coords.longitude;

        output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

        var img = new Image();
        img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

        output.appendChild(img);
      };

      function error() {
        output.innerHTML = "Unable to retrieve your location";
      };

      output.innerHTML = "<p>Locating</p>";

      navigator.geolocation.getCurrentPosition(success, error);
    }

    // Function for adding a marker to the page.
        function addMarker(location) {
            marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
        }

这里是jsbin：

http://jsbin.com/luwakoburo/edit?html,console,output

这里是我已经检查过的其他页面：

Add Marker function with Google Maps API

setting google maps marker javascript

Answer 1

请参阅documentation for static maps。要在地图上放置标记，请使用 markers=latitude,longitude。

标记

markers 参数在一组位置定义一组一个或多个标记。

working fiddle

代码 sn-p：

function geoFindMe() {
  var output = document.getElementById("latlongdiv");

  if (!navigator.geolocation) {
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?markers=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "<p>Locating</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}
geoFindMe();
// Function for adding a marker to the page.
function addMarker(location) {
  marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
}

<div id="latlongdiv"></div>

Answer 2

更改图片网址以添加标记，如下所示：

img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + 纬度 + "," + 经度 + "&zoom=13&size=300x300&sensor=false&markers=" + 纬度 + "," + 经度；

Answer 3

在成功回调中，需要使用经纬度生成地图和标记对象。

典型的流程如下：

1. 调用navigator.geolocation.getCurrentPosition()

在getCurrentPosition()的成功回调中

1. 获取一个正确位置的地图对象：

   var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

   var mapOptions = {

   缩放：13，

   中心：位置

   };

   var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

2. 使用地图生成标记

   var 标记 = 新的 google.maps.Marker({

   地图：地图，

   位置：位置

   });

这是一个很好的参考： https://developers.google.com/maps/documentation/javascript/markers