如何在地图上点击链接地址获取地址？

我有这个演示：http://jsfiddle.net/eB2RX/182/我想要的是当用户点击地图右侧的地图找到该地址。任何建议我怎么能做到这一点？如何在地图上点击链接地址获取地址？

$(".location_address a").click(function(e){ 
    getLatLong("Travnik"); 
})

来源

2016-05-24 None

您必须将您点击的城市的名称传递给getLatLong函数。因此，像这样：

$(".location_address a").click(function(e){ 
    getLatLong($(this).html()); 
});

然后在当你有地址的坐标getLatLong功能，可以创建一个标记和中心映射到该位置：

if(map){ 
    var newLatLng = new google.maps.LatLng(myLatLngLan, myLatLngLon); 
    //add a marker on map to our new location 
    var marker = new google.maps.Marker({ 
     position: newLatLng, 
     map: map, 
     title: address 
    }); 
    //center the map to the location     
    map.setCenter(newLatLng); 
}

而且你必须有map对象可用的，所以我已经把它作为这个例子的全球范围。

这是根据您提供的，但我强烈建议你重构代码，它看起来凌乱而有像getLatLong问题修改myLatLng1和myLatLng2变量由于某种原因，没有将标记放到马上代码工作的例子，等等。你将不得不自己解决这些问题，我只是创建了一个你想要实现的例子。

工作代码（点击full page为更好的体验）：

var map = null; 
 

 
getLatLong("Sarajevo"); 
 
$(".location_address a").click(function(e){ 
 
    getLatLong($(this).html()); 
 
}) 
 
    // When the window has finished loading create our google map below 
 
      google.maps.event.addDomListener(window, 'load', init); 
 
      var myLatLng1 = {}; 
 
      var myLatLng2 = {}; 
 
      
 
      function init() { 
 
       // Basic options for a simple Google Map 
 
       // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions 
 
       var mapOptions = { 
 
        // How zoomed in you want the map to start at (always required) 
 
        zoom: 15, 
 

 
        // The latitude and longitude to center the map (always required) 
 
        center: new google.maps.LatLng(myLatLng1, myLatLng2), // New York 
 

 
        // How you would like to style the map. 
 
        // This is where you would paste any style found on Snazzy Maps. 
 
        styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}] 
 
       }; 
 

 
       // Get the HTML DOM element that will contain your map 
 
       // We are using a div with id="map" seen below in the <body> 
 
       var mapElement = document.getElementById('map'); 
 

 
       // Create the Google Map using our element and options defined above 
 
       map = new google.maps.Map(mapElement, mapOptions); 
 

 
       // Let's also add a marker while we're at it 
 
       var marker = new google.maps.Marker({ 
 
        position: new google.maps.LatLng(myLatLng1, myLatLng2), 
 
        map: map, 
 
        title: 'Snazzy!' 
 
       }); 
 
      } 
 
      function getLatLong(address) { 
 
      var geo = new google.maps.Geocoder; 
 
      geo.geocode({'address':address},function(results, status){ 
 
       if (status == google.maps.GeocoderStatus.OK) {    
 
        var myLatLngLan = results[0].geometry.location.lat(); 
 
        var myLatLngLon = results[0].geometry.location.lng(); 
 
        myLatLng1 = myLatLngLan; 
 
        myLatLng2 = myLatLngLon; 
 
        // Add some code to work with myLatLng 
 
        if(map){ 
 
         var newLatLng = new google.maps.LatLng(myLatLngLan, myLatLngLon); 
 
         //add a marker 
 
         var marker = new google.maps.Marker({ 
 
         position: newLatLng, 
 
         map: map, 
 
         title: address 
 
         }); 
 
        
 
         map.setCenter(newLatLng); 
 
        } 
 
\t \t \t \t \t \t \t \t \t \t 
 
       } else { 
 
        alert("Geocode was not successful for the following reason: " + status); 
 
       } 
 
      }); 
 
      }

.card { 
 
\t position: relative; 
 
    clear: both; 
 
    padding: 15px; 
 
    margin-bottom: 1em; 
 
    position: relative; 
 
    box-shadow: 0 2px 2px rgba(0,0,0,.1); 
 
    border-radius: 2px; 
 
    -webkit-transition: all .6s cubic-bezier(.165,.84,.44,1); 
 
    -o-transition: all .6s cubic-bezier(.165,.84,.44,1); 
 
    transition: all .6s cubic-bezier(.165,.84,.44,1); 
 
    background-color: #222; 
 
    height: 600px; 
 
} 
 

 
#map { 
 
    \t width: 100%; 
 
    \t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.location_address { 
 
    position: absolute; 
 
    right: 15px; 
 
    top: 15px; 
 
    bottom: 30px; 
 
    background-color: #292929; 
 
    width: 192px; 
 
} 
 
.location_address ul { 
 
    list-style-type: none; 
 
    float: left; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.location_address li { 
 
    float: left; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 5px; 
 
    border-bottom: 1px solid #eeeeee; 
 
} 
 
.location_address li a{ 
 
\t color: white; 
 
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
<script type="text/javascript"> 
 
    google.load("maps", "3",{other_params:"sensor=false"}); 
 
</script> 
 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
<div id="map"></div> 
 
    
 
    <div class="location_address"> 
 
     <ul> 
 
     <li><a href="#">Zenica</a></li> 
 
     </ul> 
 
    </div>

来源

2016-05-24 13:26:32

如何在地图上点击链接地址获取地址？

回答

相关问题