如何让标记显示在 Google 地图上

Question

我正在尝试让标记显示在 google 地图上。我已经去过这里的各种 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

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

典型流程如下：

呼叫navigator.geolocation.getCurrentPosition()

getCurrentPosition()成功回调中

获取具有适当位置的地图对象：

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);
用地图生成标记

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

地图:地图,

位置：正

});

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

Answer 2

更改图像 url 以添加如下标记：

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

Answer 3

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

Markers

The markers parameter defines a set of one or more markers at a set of locations.

working fiddle

代码片段：

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>

如何让标记显示在 Google 地图上

How to make the marker show up on the Google map

javascript

google-maps

marker