Question

我在网页上有一个带有标记的谷歌地图。每个标记都有一个独特的特征位置和类型

这是我想要实施的方案：

在另一个网页上，我有静态链接到地图的不同标记。
如果您点击其中一个链接，您将被定向到地图，其中一个标记居中（并打开其信息窗口）。

但标记的纬度和经度可能会发生变化，而链接永远不会改变。

这意味着，我需要链接不使用纬度和经度信息，而是使用标记要素类型（它们保持不变）。

我该怎么做？

到目前为止，这是我的示例谷歌地图脚本：

<script>

function initMap() {
    var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
        center: {lat: 48.85639, lng: 2.33625}, // default centering
        zoom: 18,
        styles: 
        [
            {featureType: 'poi',stylers: [{ visibility: 'off' }]},
            {featureType: 'transit.station',stylers: [{ visibility: "off" }]}
        ]
    });

    var features = [
      {position: new google.maps.LatLng(48.85659, 2.33555),type: 'markerone'},
      {position: new google.maps.LatLng(48.85619, 2.33695),type: 'markertwo'}           
    ];

    var icons = {
          'markerone': {icon: 'icon_one.png'},
          'markertwo': {icon: 'icon_two.png'}
    };

    var contents= {
          'markerone': {text: 'Content 1'},
          'markertwo': {text: 'Content 2'}
    };

    for (var i = 0, feature; feature = features[i]; i++) 
    {
        var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
        });

        var content = contents[feature.type].text;

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 
            return function() {
                infowindow.setContent(content);
                infowindow.open(map,marker);
            };
        })(marker,content,infowindow)); 

        google.maps.event.addListener(marker,'mouseout', (function(marker,content,infowindow){ 
            return function() {
                infowindow.close(map,marker);
            };
        })(marker,content,infowindow));
    }        

}
</script>

在这个样本中，我需要标记。一个具有“markerone”的特征类型，第二个是“markertwo”。

如何设置我的链接以这种方式重定向并将地图围绕特定标记居中： http://www.mywebsite.com/mymap.php?myvariable=markertwo

谢谢。

Answer 1

首先你必须得到参数。下面的示例获取所有参数并将它们放入数组中。在那里你可以搜索你的某个参数，如“markerType”，并检查它是否给定。如果不是，则必须执行默认操作，否则您可以处理某个markerType，例如找到正确的标记，将地图中心设置为它并打开相应的infoWindow。

您只需要调用focusMarkerType - 方法onload of your page。

function getSearchParameters() {
      var prmstr = window.location.search.substr(1);
      return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

function focusMarkerType(){
  var params = getSearchParameters();
  if(params.markerType!=null){
     //Handling the certain marker type
     var found = false;
     for (var i = 0, feature; feature = features[i]; i++) {
         if (feature.type == params.markerType) {
            found = true;
            map.setCenter(feature.position);
            //more...
            break;
         }
     }
     if (!found) {
         console.log("unknown type")
     }
  }else{
     //Handling default behaviour if no marker type is given
  }
}

Google Map：根据要素类型链接到地图

1 个答案: