谷歌地图显示多个标记在每个外部链接位置点击不用页面刷新 [英] google map to display multiple markers in each external links location click without page refresh

查看：147
本文介绍了谷歌地图显示多个标记在每个外部链接位置点击不用页面刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想显示Google地图，以在每个地点锁定多个商店。

例如，地点是
>


如果点击链接Chennai，地图将只在Chennai中显示多个商店。如果我点击链接Trichy，地图将只在Trichy中显示多个商店，而无需重新加载页面。



如何在谷歌地图中编码？



当前的代码是

Html： 

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8> 
< link rel =stylesheettype =text / csshref =css / style.css> 
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascriptsrc =js / map.js>< / script> 
< / head> 
< body> 
< div id =map-canvasstyle =width：500px; height：400px;/> 
< / body> 
< / html>



js code 

  // * 
 // *添加多个标记
 // * 2013  -  en.marnoto.com 
 // * 
 
 //必要的变量
 var map; 
 var infoWindow; 
 
 // markersData变量存储每个标记所必需的信息
 var markersData = [
 {
 lat：40.6386333，
 lng：-8.745，
名称：Jayasurya Tex，
地址1：Anna strret，
地址2：Chennai，
邮政编码：625789//不要在最后插入逗号每个标记的项目
}，
 {
 lat：40.59955，
 lng：-8.7498167，
名称：Ram Tex，
 address1： 65 Kovalan strret，
 address2：chennai，
 postalCode：625001//不要在每个标记的最后一项插入逗号
}，
 {
 lat：-33.890542，
 lng：51.274856，
 name：Keerthi Tex，
 address1：465 avinashi road，
 address2：Erode，
 postalCode：638009//不要在每个标记的最后一项插入逗号
}，
 {
 lat：-33.890542，
 lng：51.274856， 
名称：至尊特克斯，
 address1：468 Pks road，
 address2：Erode，
 postalCode：638009//不要在每个记号的最后一项插入逗号
}，
 {
 lat：40.6247167，
 lng：-8.7129167，
名称：Niva Tex，
地址1：75小巴扎街，
 address2 ：Trichy，
 postalCode：698547//不要在每个标记的最后一项中插入逗号
} //不要在最后一项中插入逗号
]; 
 
 
函数初始化（）{
 var mapOptions = {
 center：new google.maps.LatLng（40.601203，-8.668173），
 zoom： 9，
 mapTypeId：'roadmap'，
}; 
 
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 
 //创建一个新的信息窗口
 infoWindow = new google.maps.InfoWindow（）; 
 
 //通过点击地图关闭信息窗口的事件
 google.maps.event.addListener（map，'click'，function（）{
 infoWindow。 close（）; 
}）; 
 
 //最后调用displayMarkers（）函数开始标记创建
 displayMarkers（）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
 
 //这个函数将遍历markersData数组
 //用createMarker函数创建标记
函数displayMarkers（）{
 
 / /此变量根据标记位置
设置地图边界var bounds = new google.maps.LatLngBounds（）; 
 
 // for循环遍历markersData数组调用每个marker的createMarker函数
 for（var i = 0; i< markersData.length; i ++）{
 
 var latlng = new google.maps.LatLng（markersData [i] .lat，markersData [i] .lng）; 
 var name = markersData [i] .name; 
 var address1 = markersData [i] .address1; 
 var address2 = markersData [i] .address2; 
 var postalCode = markersData [i] .postalCode; 
 
 createMarker（latlng，name，address1，address2，postalCode）; 
 
 //标记位置被添加到边界变量
 bounds.extend（latlng）; 
} 
 
 //最后，bounds变量用于设置地图边界
 //带fitBounds（）函数
 map.fitBounds（bounds）; 
} 
 
 //这个函数创建每个标记并设置它们的信息窗口内容
函数createMarker（latlng，name，address1，address2，postalCode）{
 var marker = new google.maps.Marker（{
 map：map，
 position：latlng，
 title：name 
}）; 
 
 //这个事件需要点击一个记号
 //当这个事件被触发时，信息窗口的内容被创建
 //并且信息窗口被打开。 
 google.maps.event.addListener（marker，'click'，function（）{
 
 //创建要插入infowindow的内容
 var iwContent ='< ; div id =iw_container>'+ 
'< div class =iw_title>'+ name +'< / div>'+ 
'< div class =iw_content >'+ address1 +'<>'+ 
 address2 +'< / div>'+ 
 postalCode +'< / div>< / div>'; 
 
 //包括信息窗口的内容
 infoWindow.setContent（iwContent）; 
 
 //在当前地图和当前地图中打开信息窗口标记位置
 infoWindow.open（map，marker）; 
}）; 
} 
  




 ＃map-canvas {
 height：50％; 
} 
 #iw_container .iw_title {
 font-size：16px; 
 font-weight：bold; 
} 
 .iw_content {
 padding：15px 15px 15px 0; 
}


解决方案

现有的代码：


  • 添加数组标记以保留所有标记 li>
  • 为每个标记添加一个属性，例如 tag ，并在其中设置该标记所属位置的值

  • 最后编写一个根据标记过滤标记的函数

  • 添加调用此函数的链接元素以在click事件上过滤标记。


概念证明 

  //必要variablesvar map; var infoWindow; var markers = []; // markersData变量存储每个markervar所需的信息markersData = [{lat：40.6386333，lng：-8.745，name ：J ayasurya Tex，address1：Anna strret，address2：Chennai，邮政编码：625789//不要在每个标记的最后一项插入逗号}，{lat：40.59955，lng：-8.7498167，name： Ram Tex，address1：65 Kovalan strret，address2：Chennai，postalCode：625001//不要在每个标记的最后一项中插入逗号}，{lat：40.6247167，lng：-8.7129167，名称：Niva Tex，地址1：75小巴扎街，地址2：Trichy，邮政编码：698547//不要在每个标记的最后一项插入逗号} //不要插入逗号最后一项]; function initialize（）{var mapOptions = {center：new google.maps.LatLng（40.601203，-8.668173），zoom：9，mapTypeId：'roadmap'，}; map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; //新建一个信息窗口infoWindow = new google.maps.InfoWindow（）; //点击地图关闭信息窗口的事件google.maps.event.addListener（map，'click'，function（）{infoWindow.close（）;}）; //最后调用displayMarkers（）函数来开始标记的创建displayMarkers（）;} //这个函数将遍历markersData数组//使用createMarker函数创建标记displayMarkers（）{//这个变量根据标记设置地图边界位置var bounds = new google.maps.LatLngBounds（）; //用于循环遍历markersData数组调用每个标记的createMarker函数（var i = 0; i< markersData.length; i ++）{var latlng = new google.maps.LatLng（markersData [i] .lat，markersData [i ] .lng）; var name = markersData [i] .name; var address1 = markersData [i] .address1; var address2 = markersData [i] .address2; var postalCode = markersData [i] .postalCode; createMarker（latlng，name，address1，address2，postalCode）; //标记位置被添加到边界变量bounds.extend（latlng）; } //最后，bounds变量用来设置地图界限//用fitBounds（）函数map.fitBounds（bounds）;} //这个函数创建每个标记并设置它们的Info窗口contentfunction createMarker（latlng，name，address1 ，address2，postalCode）{var marker = new google.maps.Marker（{map：map，position：latlng，title：name}）; marker.tag = address2; markers.push（标记）; //这个事件期望点击一个标记//当这个事件被触发时，信息窗口的内容被创建//并且信息窗口被打开。 google.maps.event.addListener（marker，'click'，function（）{//创建要插入infowindow的内容var iwContent ='< div id =iw_container>'+'< div class =iw_title>'+ name +'< / div>'+'< div class =iw_content>'+ address1 +'< br />'+ address2 +'< br /> ;'+ postalCode +'< / div>< / div>'; //包含信息窗口的内容infoWindow.setContent（iwContent）; //在当前地图和当前标记位置打开信息窗口。infoWindow.open（map，marker）;}）;}函数filterMarkersByTag（tagName）{var bounds = new google.maps.LatLngBounds（）; markers.forEach（function（marker）{marker.setMap（null）;}）; var filtered = markers.filter（function（marker）{return marker.tag === tagName;}）; if（filtered&& filtered.length）{filtered.forEach（function（marker）{bounds.extend（marker.getPosition（））; marker.setMap（map）;}）; map.fitBounds（边界）; }}

＃map-canvas {height：50％; } #iw_container .iw_title {font-size：16px; font-weight：bold;}。iw_content {padding：15px 15px 15px 0;} 

 < a href =＃title =Chennaionclick =filterMarkersByTag（'Chennai'）; return false;> Chennai< / a>< a href =＃title = Trichyonclick =filterMarkersByTag（'Trichy'）; return false;> Trichy< / a>< div id =map-canvasstyle =width：500px; height：400px;>< / div>< script async defer type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize>< / script>



我希望这有助于您！


I wanted to display the Google map to pin multiple stores in each location.

For example, locations are

  • Chennai
  • Trichy
  • Bangalore
  • Hyderabad

If I click the link Chennai, the map will display multiple stores only in Chennai. If I click the link Trichy, the map will display multiple stores only in Trichy without page reloading.

How to code this in google map?

Current code is

Html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/map.js"></script>
  </head>
  <body>
    <div id="map-canvas"style="width: 500px; height: 400px;"/>
  </body>
</html>

js code

// *
// * Add multiple markers
// * 2013 - en.marnoto.com
// *

// necessary variables
var map;
var infoWindow;

// markersData variable stores the information necessary to each marker
var markersData = [
   {
      lat: 40.6386333,
      lng: -8.745,
      name: "Jayasurya Tex",
      address1:"Anna strret",
      address2: "Chennai",
      postalCode: "625789" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Ram Tex",
      address1:"65 Kovalan strret",
      address2: "chennai",
      postalCode: "625001" // don't insert comma in the last item of each marker
   },
   {
      lat: -33.890542,
      lng: 51.274856,
      name: "Keerthi Tex",
      address1:"465 avinashi road",
      address2: "Erode",
      postalCode: "638009" // don't insert comma in the last item of each marker
   },
   {
      lat: -33.890542,
      lng: 51.274856,
      name: "supreme Tex",
      address1:"468 Pks road",
      address2: "Erode",
      postalCode: "638009" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.6247167,
      lng: -8.7129167,
      name: "Niva Tex",
      address1:"75 small bazar street",
      address2: "Trichy",
      postalCode: "698547" // don't insert comma in the last item of each marker
   } // don't insert comma in the last item
];


function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();

   // Event that closes the Info Window with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);


// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds according to markers position
   var bounds = new google.maps.LatLngBounds();

   // for loop traverses markersData array calling createMarker function for each marker 
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var postalCode = markersData[i].postalCode;

      createMarker(latlng, name, address1, address2, postalCode);

      // marker position is added to bounds variable
      bounds.extend(latlng);  
   }

   // Finally the bounds variable is used to set the map bounds
   // with fitBounds() function
   map.fitBounds(bounds);
}

// This function creates each marker and it sets their Info Window content
function createMarker(latlng, name, address1, address2, postalCode){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name
   });

   // This event expects a click on a marker
   // When this event is fired the Info Window content is created
   // and the Info Window is opened.
   google.maps.event.addListener(marker, 'click', function() {

      // Creating the content to be inserted in the infowindow
      var iwContent = '<div id="iw_container">' +
            '<div class="iw_title">' + name + '</div>' +
         '<div class="iw_content">' + address1 + '<br />' +
         address2 + '<br />' +
         postalCode + '</div></div>';

      // including content to the Info Window.
      infoWindow.setContent(iwContent);

      // opening the Info Window in the current map and at the current marker location.
      infoWindow.open(map, marker);
   });
}

css 

#map-canvas {
    height: 50%;
}
#iw_container .iw_title {
    font-size: 16px;
    font-weight: bold;
}
.iw_content {
    padding: 15px 15px 15px 0;
}

解决方案

You can make several changes in the existing code:

  • add an array markers to keep all your markers
  • add a property, for example tag to each marker and set there the value of the location this marker belongs to
  • write a function that filters markers according to the tag
  • finally, add link elements that call this function to filter markers on click event.

Proof of concept

// necessary variables
var map;
var infoWindow;
var markers = [];

// markersData variable stores the information necessary to each marker
var markersData = [
   {
      lat: 40.6386333,
      lng: -8.745,
      name: "Jayasurya Tex",
      address1:"Anna strret",
      address2: "Chennai",
      postalCode: "625789" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Ram Tex",
      address1:"65 Kovalan strret",
      address2: "Chennai",
      postalCode: "625001" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.6247167,
      lng: -8.7129167,
      name: "Niva Tex",
      address1:"75 small bazar street",
      address2: "Trichy",
      postalCode: "698547" // don't insert comma in the last item of each marker
   } // don't insert comma in the last item
];


function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();

   // Event that closes the Info Window with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
}

// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds according to markers position
   var bounds = new google.maps.LatLngBounds();

   // for loop traverses markersData array calling createMarker function for each marker 
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var postalCode = markersData[i].postalCode;

      createMarker(latlng, name, address1, address2, postalCode);

      // marker position is added to bounds variable
      bounds.extend(latlng);  
   }

   // Finally the bounds variable is used to set the map bounds
   // with fitBounds() function
   map.fitBounds(bounds);
}

// This function creates each marker and it sets their Info Window content
function createMarker(latlng, name, address1, address2, postalCode){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name
   });
   
   marker.tag = address2;
   markers.push(marker);

   // This event expects a click on a marker
   // When this event is fired the Info Window content is created
   // and the Info Window is opened.
   google.maps.event.addListener(marker, 'click', function() {

      // Creating the content to be inserted in the infowindow
      var iwContent = '<div id="iw_container">' +
            '<div class="iw_title">' + name + '</div>' +
         '<div class="iw_content">' + address1 + '<br />' +
         address2 + '<br />' +
         postalCode + '</div></div>';

      // including content to the Info Window.
      infoWindow.setContent(iwContent);

      // opening the Info Window in the current map and at the current marker location.
      infoWindow.open(map, marker);
   });
}

function filterMarkersByTag(tagName) {
    var bounds = new google.maps.LatLngBounds();
    
    markers.forEach(function(marker) {
        marker.setMap(null);
    });

    var filtered = markers.filter(function(marker) {
        return marker.tag === tagName;
    }); 
    
    if (filtered && filtered.length) {
        filtered.forEach(function(marker) {
            bounds.extend(marker.getPosition());
            marker.setMap(map);
        });

        map.fitBounds(bounds);
    }
}

#map-canvas {
    height: 50%;
}
#iw_container .iw_title {
    font-size: 16px;
    font-weight: bold;
}
.iw_content {
    padding: 15px 15px 15px 0;
}

<a href="#" title="Chennai" onclick="filterMarkersByTag('Chennai');return false;">Chennai</a>
<a href="#" title="Trichy" onclick="filterMarkersByTag('Trichy');return false;">Trichy</a>
<div id="map-canvas" style="width: 500px; height: 400px;">
</div>
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize"></script>

I hope this helps!

这篇关于谷歌地图显示多个标记在每个外部链接位置点击不用页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆