Question

假设我有一个包含2 <div>的html，一个是Google地图，一个是列表
当然，地图<div>正在显示地图
列表<div>是第二位置列表（例如纽约，伦敦等）我有一个问题，如何点击列表中的一个位置，然后地图将转到特定位置？
当点击列表项时，是使用javascript调用还是如何使用Javascript来执行此类功能？

Answer 1

我正在使用一些jquery来选择元素，调用click函数，并从title属性中获取地址。

查看此jsfiddle以供参考：

http://jsfiddle.net/X5r8r/263/

<a class="location" title="New York, NY">New York</a>
<a class="location" title="Los Angeles, CA">Los Angeles</a>
<a class="location" title="Washington District of Columbia">Washington</a>

<div id="map-canvas" title="1600 Washington"></div>

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(0,0);
    var myOptions = {
         zoom: 17,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

function codeAddress(element) {
    var address = element.attr('title');
    geocoder.geocode( { 'address': address}, 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);
        }
    });
}

$(document).ready(function(){
    $map = $('#map-canvas');

    initialize();
    codeAddress($map);

    $('.location').click(function(){
        $me = $(this);
        codeAddress($me);
    });
});

如何使用javascript调用谷歌地图的具体位置

1 个答案: