2016-08-14 113 views
-1

我有谷歌地图在网页上有标记。 每个标记具有独特的功能位置和类型谷歌地图:根据地图类型链接到地图

这是我想到位的情况:

  • 在另一个网页我有静态链接到地图的不同标记。
  • 如果您点击其中一个链接,您将被导向到其中一个标记居中的地图(及其信息窗口打开)。

但是标记的经纬度可能会改变,而链接永远不会改变。

这意味着,我需要的链接不使用经度和纬度信息,但标记功能类型,而不是(它们保持不变)。

我该怎么做?

这是到目前为止我的样本谷歌地图脚本:

<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

谢谢。

+0

您的意思是这样的:http://www.geocodezip.com/v3_MW_example_linktomarker.html?id=Marker%20Two – geocodezip

回答

0

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

你只需要调用focusMarkerType-方法onload你的页面。

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