JQuery中的简单地理编码映射-Java 学习之路

-1

如何在Jquery中创建一个只绘制一个位置的简单 Map . 这是我现在的代码 . 这绘制了一系列位置，但我只需要一个简单的 Map ，用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>

我需要新的 Map 来绘制一个纬度和长度点，并在上面列出教科书中的位置 . 没有数组，我无法弄清楚如何做到这一点 .

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

回复于 2024-04-29T06:05:03+08:00

JQuery中的简单地理编码映射

1 回答

相关问题