2017-10-05 144 views
-1

是否有可能针对特定标记的InfoWindow更新它?Google Maps API v3 - 如何更新标记的InfoWindow

单击标记时,将打开显示名称和地址的InfoWindow。它还将Lat和Long发送到PHP脚本,以便从地图上的div中的数据库中获取有关此Marker的更多详细信息。

我希望能够更新名称和地址使用这个离开地图的div,这是没有问题的 - 我坚持如何针对特定标记的InfoWindow来更新它与新的名称和地址,虽然。

我已经为每个标记添加了一个标识,但我不知道如何使用它(或者如果可能的话)以该标识为目标标记,并从发送信息的其他函数更新其InfoWindow数据库。

\t  var map; 
 
\t  var map_center = {lat: <?=$map['lat']?>, lng: <?=$map['lng']?>}; 
 
\t  var markers = []; 
 
\t  var infowindow = new google.maps.InfoWindow(); 
 

 
\t  map_initialize(); // initialize google map 
 
\t  
 
\t  //############### Google Map Initialize ############## 
 
\t  function map_initialize() { 
 
     var googleMapOptions = { 
 
      center: map_center, // map center 
 
      zoom: 15, //zoom level, 0 = earth view to higher value 
 
      panControl: true, //enable pan Control 
 
      zoomControl: true, //enable zoom control 
 
      zoomControlOptions: { 
 
      style: google.maps.ZoomControlStyle.SMALL //zoom control size 
 
     }, 
 
     \t scaleControl: true, // enable scale control 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP // google map type 
 
     }; 
 
    
 
     map = new google.maps.Map(document.getElementById("map"), googleMapOptions);   
 
     
 
     $.getJSON("<?=$urlpath?>map_process.php", function(data) { 
 
     \t 
 
\t \t \t \t $.each(data, function(key, val) { 
 
\t \t \t \t \t \t var point  \t = new google.maps.LatLng(parseFloat(val['lat']),parseFloat(val['lng'])); 
 
\t \t \t \t \t \t var name  \t = val['name']; 
 
\t \t \t \t \t \t var address \t = '<p>'+ val['address'] +'</p>'; 
 
\t \t \t \t \t \t var properties \t = val['properties']; 
 
\t \t \t \t \t var id \t \t \t \t \t = val['id']; 
 
\t \t \t \t \t 
 
\t \t \t \t \t create_marker(point, name, address, false, false, "/images/pin_green.png", properties, id); 
 
\t \t \t }) 
 
\t \t \t }); 
 
          
 
    } 
 

 
\t \t //############### Function create_marker ############## 
 
\t \t 
 
\t \t 
 
\t \t function create_marker(MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, iconPath, properties, id) {   
 
\t  
 
\t  var this_id = 'marker_' + id; 
 
\t \t  
 
\t \t  //new marker 
 
\t \t  var marker = new google.maps.Marker({ 
 
\t \t  \t id: this_id, 
 
\t   position: MapPos, 
 
\t   map: map, 
 
\t   draggable: DragAble, 
 
\t   animation: google.maps.Animation.DROP, 
 
\t   title: MapTitle, 
 
\t   icon: iconPath, 
 
\t   properties: properties 
 
\t \t  }); 
 
\t \t  
 
\t \t  //Content structure of info Window for the Markers 
 
\t \t  var contentString = $('<div class="marker-info-win">'+ 
 
\t \t  '<div class="marker-inner-win"><span class="info-content">'+ 
 
\t \t  '<h1 class="marker-heading">'+MapTitle+'</h1>'+ 
 
\t \t  MapDesc+ 
 
\t \t  '</span>'+ 
 
\t \t  '</div></div>');  
 

 
\t \t \t google.maps.event.addListener(marker, 'click', function(event) { 
 

 
\t \t \t  infowindow.setContent(contentString[0]); 
 
\t \t \t  infowindow.open(map, marker); 
 
\t \t \t  
 
\t \t \t  //############### Send latlng to right panel ############## 
 
\t \t \t  
 
\t \t  \t var mLatLang = marker.getPosition().toUrlValue(); //get marker position 
 
\t \t  \t showRightPanel(mLatLang); 
 
\t \t \t  
 
\t \t \t }); 
 
\t \t \t \t \t \t  
 
\t \t \t \t markers.push(marker); 
 
\t \t \t } \t \t 
 

 

 

 

 
\t \t \t function showRightPanel(mLatLang) { //function that will add markers on button click 
 
\t \t \t 
 
\t  var myData = {latlang : mLatLang}; //post variables 
 
\t  $.ajax({ 
 
\t   type: "POST", 
 
\t   url: "<?=$urlpath?>map_show_panel.php", 
 
\t   data: myData, 
 
\t   success:function(data){ 
 
\t   \t $('#marker_result').html(data); 
 
\t   }, 
 
\t   error:function (xhr, ajaxOptions, thrownError){ 
 
\t   \t alert(thrownError); //throw any errors 
 
\t   } 
 
\t  }); 
 
\t \t \t 
 
\t \t \t }

+0

如果信息窗口已打开(添加到DOM),你可以使用普通的JavaScript/jQuery方法访问它中的HTML元素。 – geocodezip

+0

也许我在问错误的问题。我希望能够更新与标记相关联的内容,因此如果稍后点击标记,它将显示此更新的内容,而不是最初使用var contentString =设置的内容.... – Ashley

+0

我已经完成了解决方法我用ajax调用更新了infoWindow,但这并不是我想要发生的事情,它似乎是一个额外的调用,没有必要,我只需要在内容需要更新时执行它(很少) – Ashley

回答

0

假设infoWindow' is your infoWindow object you can change the content of an infoWindow if you can access (you have visibility of the infoWindow object) using setContent()`如:

infoWindow.setContent('your new content'); 
相关问题