我有此代码:
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-1" id="obj-1"><div class="apartament_atrakcje">Atrakcja 1 pl</div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-2" id="obj-2"><div class="apartament_atrakcje">Atrakcja 2 PL</div></a>
</div>
<div id="map_canvas"></div>
<script>
window.onload = function () {
var styles = [{"featureType":"all"}];
var bounds = new google.maps.LatLngBounds();
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(11, 22),
zoom: 15,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
marker = new google.maps.Marker({
map:map,
});
var div = document.getElementById('map_canvas');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
var markers = [
[
'Atrakcja 1 pl',
51.73925413,
19.51309225,
'Atrakcja 1 pl',
'#'
],
[
'Atrakcja 2 PL',
53.41475000,
14.60220358,
'Atrakcja 2 PL',
'#'
],
];
var infoWindow= new google.maps.InfoWindow({maxWidth:600}),
marker, i,
image = 'http://localhost/assets/poi.png';
for( i = 0; i < markers.length; i++ ) {
var beach = markers[i];
var position = new google.maps.LatLng(beach[1], beach[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
icon: image,
title: beach[0],
myurl: beach[4]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent('<a href="'+marker['myurl']+'">'+marker['title']+'</a>');
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
map.mapTypes.set('Styled', styledMapType);
}
}
</script>
我有2个链接:
- Atrakcja 1 pl
- Atrakcja 2 pl.
我想点击上面的链接以在Google地图上选择合适的标记。
因此,如果用户单击链接“ Atrakcja 1 pl”,则Google地图将显示标记Atrakcja 1 pll。我希望此标记在地图上居中,并且其提示将可见。
如何在我的代码中执行此操作?
请帮帮我。
答案 0 :(得分:1)
使用addmarker
函数,如下所示:
var markers = [
[
'Atrakcja 1 pl',
51.73925413,
19.51309225,
'Atrakcja 1 pl',
'#'
],
[
'Atrakcja 2 PL',
53.41475000,
14.60220358,
'Atrakcja 2 PL',
'#'
],
];
function addmarker(point) {
var latlng = new google.maps.LatLng(point[1], point[2]);
var marker = new google.maps.Marker({
position: latLang,
title: point[0],
draggable: true,
map: map
});
map.setCenter(marker.getPosition())
}
$('#obj-1').on('click', function() {
addmarker(markers[0])
})
$('#obj-2').on('click', function() {
addmarker(markers[1])
})
此代码使用jquery
将此添加到您的html head
标签
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
答案 1 :(得分:0)
设置标记使用后
map.setCenter(marker.position);
marker.setMap(map);
并且您还必须包括脚本来显示地图
<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback={function}" async defer></script>