添加标记onclick谷歌地图api
Add marker onclick google maps api
我有这个函数与谷歌地图API添加标记。
是否可以在href链接点击上显示标记信息?
我的标记是动态加载的…
这是目前为止我的一小部分代码,但它不起作用。
<script type="text/javascript">
var infowindow = new google.maps.InfoWindow();
function addMarker(lat, lon, naam, straat, postcode, plaats, telefoon, afstand)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
icon: "afbeeldingen/pincard/wheel-icon.png",
title: naam
});
google.maps.event.addListener(marker, 'click', function() {
var contentString = '<div>'+
'<b style="border-bottom: 1px solid #000000;">' + naam + '</b><br/>'+
'Afstand (hemelsbreed): ' + afstand + ' km<br/>' +
straat + '<br/>' +
postcode + ' ' + plaats + '<br/>';
if(telefoon != "")
{
contentString = contentString + 'Telefoonnr: ' + telefoon;
}
contentString = contentString + '</div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
这是我使用的href:
<a href="javascript:google.maps.event.trigger(marker, 'click');">Click</a>
欢迎任何帮助:)
我得到了边栏的东西现在工作正常。:)
这是我的最终代码:
<script type="text/javascript">
var geocoder;
var map;
var side_bar_html = "";
var gmarkers = [];
var infobox;
function initialize() {
var blueOceanStyles = [
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -100 } // <-- THIS
]
}
];
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: <?php
if(is_array($postcodevelden) && count($postcodevelden) > 0 && !empty($_POST['address']))
{
switch($radius)
{
case "5":
echo "12";
break;
case "10":
echo "11";
break;
case "15":
case "20":
echo "10";
break;
case "30":
case "40":
echo "9";
break;
}
}
else
{
echo "7";
}
?>,
center: new google.maps.LatLng(<?php if(is_array($postcodevelden) && count($postcodevelden) > 0) { echo $lat.", ".$lon; } else { echo "52.2008737173322, 5.25146484375"; } ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setOptions({styles: blueOceanStyles});
<?php
if(is_array($adressen) AND count($adressen) > 0)
{
foreach($adressen as $adres)
{
$afstand = round((6371 * acos(sin(deg2rad($lat)) * sin(deg2rad($adres->locatie_lat)) + cos(deg2rad($lat)) * cos(deg2rad($adres->locatie_lat)) * cos(deg2rad($adres->locatie_lon) - (deg2rad($lon))))), 2);
?>
addMarker(<?php echo $adres->locatie_lat.", ".$adres->locatie_lon.", '".$adres->locatie_naam."', '".$adres->locatie_straat."', '".$adres->locatie_postcode."', '".$adres->locatie_plaats."', '".$adres->locatie_telefoon."', '".$afstand."'"; ?>);
<?php
}
}
?>
document.getElementById("marker_list").innerHTML = side_bar_html;
}
function myclick(i) {
map.setCenter(gmarkers[i].getPosition());
google.maps.event.trigger(gmarkers[i], "click");
}
infowindow = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.95,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
function addMarker(lat, lon, naam, straat, postcode, plaats, telefoon, afstand)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
icon: "afbeeldingen/pincard/wheel-icon.png",
title: naam
});
google.maps.event.addListener(marker, 'click', function() {
var contentString = '<div id="infobox">'+
'<b style="border-bottom: 1px solid #f6ee34; color:#ee2a24;">' + naam + '</b><br/>'+
'Afstand (hemelsbreed): ' + afstand + ' km<br/>' +
straat + '<br/>' +
postcode + ' ' + plaats + '<br/>';
if(telefoon != "")
{
contentString = contentString + 'Telefoonnr: ' + telefoon;
}
contentString = contentString + '</div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
gmarkers.push(marker);
side_bar_html += '<tr>'+ '<td onclick="javascript:myclick(' + (gmarkers.length-1) + ')"><a>' + naam + '<br/>' + straat + '<br/>' + postcode + ' ' + plaats + '<br/>' + 'Afstand ' + afstand + ' km' +'</td>' +'<'/a></tr><br>';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
我得到用户输入范围内所有邮政编码的完整列表。现在我不知道如何在侧边栏中对输出进行排序,但这是另一个问题。
相关文章:
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 谷歌地图JS API+JSON-多个标记没有显示
- 标记的实时更新,无需加载页面谷歌地图API V3
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 谷歌地图Api和JS代码不工作
- 谷歌地图API-InfoBubble赢得't关闭-关闭()不会'不起作用
- 如何在多承诺链中处理谷歌地图API V3事件
- 地理定位api和谷歌地图出错
- 谷歌地图api和gMapsLatLonPicker
- 谷歌地图地点API地图未显示
- 当我使用高度百分比时,谷歌地图javascript api不会显示
- 谷歌地图API-“;toGeoJson”;返回几何体为null的对象
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- 为什么谷歌地图API's方法未从RequireJS中正确调用
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 使用谷歌地图API和phonegap显示当前位置+方向
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市)
- 关于关键的API谷歌地图
- mark.setDragable(false)在API谷歌地图的main.js中抛出异常
- 隐藏标记出现后缩放- API谷歌地图V3