Question

是否可以点击其他标签2 并更改标记/位置？点击标签1 标记/位置，然后返回第一个位置。

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);

Answer 1

可以将标记添加到地图中，如下所示：

var myLatlng = new google.maps.LatLng(lat, lon)

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!'
});

然后可以像这样改变标记位置：

marker.setPosition(new google.maps.LatLng(lat, lon));

为了根据用户选择的标签更改制作者的位置，您可以执行以下操作：

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));
}

Answer 2

创建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]和$ coord [1]是第一个标记的纬度和经度 $ coord2 [0]和$ coord2 [1]是第二个标记的纬度和经度

不要忘记在标签上添加onclick功能：

onclick="recenter();"

onclick="recenter2();"

Google地图单击链接/选项卡以更改标记位置图

2 个答案: