[英]Google Map Click on link/tab to change marker location map
Is that possible to click on the other Tab 2 and the marker/location change? 是否可以单击其他选项卡2并更改标记/位置 ? Click back on Tab 1 marker/location change back to first location.
单击选项卡1 标记/位置更改回第一个位置。
[Links to Fiddle] http://jsfiddle.net/ye3x8/ [链接到小提琴] http://jsfiddle.net/ye3x8/
function initialize() {
var styles = [{
stylers: [{
saturation: -100
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
});
var mapProp = {
center: new google.maps.LatLng(3.165659, 101.611416),
zoom: 17,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
rotateControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style')
var marker = new google.maps.Marker({
position: new google.maps.LatLng(3.167244, 101.612950),
animation: google.maps.Animation.DROP,
icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Outside-Pink.png',
});
marker.setMap(map);
google.maps.event.addListener(marker, "click", function () {
});
}
google.maps.event.addDomListener(window, 'load', initialize);
A marker can be added to your map like so: 可以将标记添加到地图中,如下所示:
var myLatlng = new google.maps.LatLng(lat, lon)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
The marker position can then be changed like so: 然后可以像这样改变标记位置:
marker.setPosition(new google.maps.LatLng(lat, lon));
In order to change the position of your maker based on which tab a user selects, you could do something like: 为了根据用户选择的标签更改制作者的位置,您可以执行以下操作:
var myLatlng = new google.maps.LatLng(lat, lon)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
//When user clicks tab1:
changeMarkerPos(marker, tab1lat, tab1lon);
//When user clicks tab1:
changeMarkerPos(marker, tab2lat, tab2lon);
function changeMarkerPos(marker, lat, lon){
marker.setPosition(new google.maps.LatLng(lat, lon));
}
Create 2 markers and add 2 functions like : 创建2个标记并添加2个功能,如:
<script>
function recenter() {
map.setCenter(new google.maps.LatLng(<?php echo $coord[0].",".$coord[1];?>));
map.setZoom(16);
}
function recenter2() {
map.setCenter(new google.maps.LatLng(<?php echo $coord2[0].",".$coord2[1];?>));
map.setZoom(16);
}
</script>
$coord[0] and $coord[1] are latitude and longitude of first marker $coord2[0] and $coord2[1] are latitude and longitude of second marker $ coord [0]和$ coord [1]是第一个标记$ coord2 [0]的纬度和经度,$ coord2 [1]是第二个标记的纬度和经度
don't forget to add onclick function on your tabs : 不要忘记在标签上添加onclick功能:
onclick="recenter();"
onclick="recenter2();"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.