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

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

img.src =＆＃34; https://maps.googleapis.com/maps/api/staticmap?center=＆＃34; +纬度+＆＃34;，＆＃34; +经度+＆＃34;＆amp; zoom = 13＆amp; size = 300x300＆amp; sensor = false＆amp; markers =＆＃34; +纬度+＆＃34;，＆＃34; +经度;

Answer 2

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

<强>标记

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

working fiddle

代码段

＆＃13;

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
  });
}

＆＃13;

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

＆＃13;

Answer 3

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

典型程序如下：

调用navigator.geolocation.getCurrentPosition（）

在getCurrentPosition（）

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

var pos = new google.maps.LatLng（position.coords.latitude，position.coords.longitude）;

var mapOptions = {

zoom：13，

center：pos

};

var map = new google.maps.Map（document.getElementById（＆＃39; map-canvas＆＃39;），mapOptions）;
使用地图生成标记

var marker = new google.maps.Marker（{

图：图，

位置：pos

}）;

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

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

3 个答案: