JQuery 中的简单地理编码地图答案

【问题标题】：Simple Geocoding Map in JQueryJQuery 中的简单地理编码地图
【发布时间】：2015-06-16 23:09:45
【问题描述】：

如何在 Jquery 中制作仅绘制一个位置的简单地图。这是我现在拥有的代码。这绘制了一组位置，但我只需要一个简单的地图，它将以 Lng，Lat 格式绘制一个点。我正在为此使用谷歌地理编码器。

var geocoder;
var map;
var markersArray = [];
var bounds;
var infowindow = new google.maps.InfoWindow({
    content: ''
});


function initialize() {
    geocoder = new google.maps.Geocoder();
    bounds = new google.maps.LatLngBounds();

    var myOptions = {
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    geocoder.geocode({
        'address': '5th Avenus New Yort'
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    plotMarkers();
}

var locationsArray = [
    ['Google Official', '1600 Amphitheatre Parkway, Mountain View, USA'],
    ['Google 1', '112 S. Main St., Ann Arbor, USA'],
    ['Google 2', '10 10th Street NE, Suite 600 USA']
];

function plotMarkers() {
    var i;
    for (i = 0; i < locationsArray.length; i++) {
        codeAddresses(locationsArray[i]);
    }
}

function codeAddresses(address) {
    geocoder.geocode({
        'address': address[1]
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(address[0]);
                infowindow.open(map, this);
            });

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }

        map.fitBounds(bounds);
    });
}

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

然后我在我的文件中调用它：

<body>
    <div id="map_canvas" style="width: 100%; height: 700px;"></div>
</body>

</html>

我需要新地图来绘制一个 lat 和 lng 点，并在上面发布教科书中的位置列表。如果没有数组，我无法弄清楚如何做到这一点。

【问题讨论】：

我会从 google example for a single marker 开始，然后从那开始（：没有必要使用 JQuery。
Dom，这非常适合我需要做的事情，但是如何在点击图标时显示位置？

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

您似乎在使用显示多个标记的示例。

我没有测试过，但我认为这个 JavaScript 很接近：

var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  geocoder.geocode( { 'address': '5th Avenue New York' }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

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

查看此内容以获取更多信息：https://developers.google.com/maps/documentation/javascript/geocoding

【讨论】：