2013-07-03 36 views
0

我正在使用google maps api v3並創建帶有XML標記的商店定位器。除了當我點擊任何當前信息窗口中的電話號碼時,一切正常。它只能從xml列表中撥打最後的製造商電話號碼。不知道是什麼原因導致這個問題或者我做錯了什麼。電話號碼未從XML數據的信息窗口撥號

繼承人什麼我圖的樣子:http://arturoluna.com/googleMaps/snippet.html

我的HTML

<div id="wrapper"> 
     <div id="mapCanvas" style="width: 320px; height: 480px;"></div> 
    </div> 

我的js

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

    <script type="text/javascript"> 
    var infowindow; 
    var map; 


    function initialize() { 
    // var position; 
    // Check if user support geo-location 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
     var geolocpoint = new google.maps.LatLng(latitude, longitude); 

      var mapOptions = { 
       zoom: 12, 
       center: geolocpoint, 
       disableDefaultUI: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      // Place a marker 
      var geolocation = new google.maps.Marker({ 
       position: geolocpoint, 
       map: map, 
       title: 'Your geolocation' 
       // icon: icon 
      }); 

     }); 
      //bounds.extend(position); 
    } 


    // Specify center of the map 
    var latLng = new google.maps.LatLng(40.713956,-73.997254); 

    // Load the Google map into the #mapCanvas div 
     map = new google.maps.Map(document.getElementById('mapCanvas'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: true,  
     center: latLng, 
     zoom: 9 
     }); 




    // Creating a LatLngBounds object 
    jQuery.get("listings.xml", function(data) { 
     jQuery(data).find("marker").each(function() { 
     var eachMarker = jQuery(this); 
     var markerCoords = new google.maps.LatLng(
      parseFloat(eachMarker.find("Latitude").text()), 
      parseFloat(eachMarker.find("Longitude").text()) 
     ); 


     var name = eachMarker.find("Name").text(); 
     var Addr = eachMarker.find("Addr").text(); 
     var city = eachMarker.find("city").text(); 
     var state = eachMarker.find("state").text(); 
     var zip = eachMarker.find("zip").text(); 
     var phone = eachMarker.find("phone").text(); 
     var website = eachMarker.find("website").text();     
     var html = "<div class='info-blob'>" 
     +"<h1>" + name + "</h1>" 
     +"<h2>" + Addr + "</h2>" 
     +"<h3>" + city +', '+ state + ' ' + zip + "</h3>" 
     +"<h4 onclick='telFun();'>" + phone + "</h4>" + "<p onclick='webFun();'>" + website + "</p>" + "<h5 onclick='zoomOut()';>back to map</h5>" 

     "</div>"; 

     var marker = addMarker(html, markerCoords); 

     window.webFun = function(){ 
      window.open('http://'+website); 
     } 

     window.telFun = function(){ 
      window.open("tel:"+phone); 
     } 

     window.zoomOut = function(){ 
     map.setZoom(9); 
     infoWindow.close(); 
     } 


     }); 
     }); 
    }// end initialize(); 

    // Create a marker for each XML entry 
    function addMarker(html, markerCoords) { 
    var bounds = new google.maps.LatLngBounds(); 
     // var Himage = new google.maps.MarkerImage("h.png", 
     //  new google.maps.Size(20.0, 34.0), 
     //  new google.maps.Point(0, 0), 
     //  new google.maps.Point(10.0, 17.0) 
     // ); 
     // var shadow = new google.maps.MarkerImage("shadow-h.png", 
     //  new google.maps.Size(38.0, 34.0), 
     //  new google.maps.Point(0, 0), 
     //  new google.maps.Point(10.0, 17.0) 
     // ); 
    // Place the new marker 
    var marker = new google.maps.Marker({ 
     animation: google.maps.Animation.DROP, 
     map: map, 
     zoom: 11, 
     // icon: icon, 
     // shadow: shadow, 
     center:markerCoords, 
     position: markerCoords 
    }); // end place the new marker 

     if (marker > 1) { 
     map.fitBounds(bounds); 
     } 
     else if (marker == 1) { 
     map.setCenter(mapBounds.getCenter(marker)); 
     map.setZoom(15); 
     } 

    // Add event listener. On marker click, close all open infoWindows open current infoWindow. 
    google.maps.event.addListener(marker, "click", function() { 
     if (infowindow) infowindow.close(); 
     infowindow = new google.maps.InfoWindow({content: html}); 
     map.setCenter(marker.getPosition()); 
     infowindow.open(map, marker); 
     map.setZoom(12); 
    }); // end add event listener 

    // Display marker 
    return marker; 

     // Extending the bounds object with each LatLng 


     // Adjusting the map to new bounding box 
     map.fitBounds(bounds) 

    } // end addMarker(); 




    window.addEventListener('load', initialize, false); 

    </script> 

我的XML

<?xml version="1.0" encoding="utf-8"?> 
<markers> 
    <marker> 
     <Name>APPLE HONDA</Name> 
     <Addr>1375 ROUTE 58</Addr> 
     <city>RIVERHEAD</city> 
     <state>NY</state> 
     <zip>11901</zip> 
     <phone>6317270555</phone> 
     <website>www.trihondadealers.com</website> 
     <Latitude>40.927732</Latitude> 
     <Longitude>-72.685829</Longitude> 
    </marker> 
    <marker> 
     <Name>ATLANTIC HONDA</Name> 
     <Addr>1391 SUNRISE HIGHWAY</Addr> 
     <city>BAY SHORE</city> 
     <state>NY</state> 
     <zip>11706</zip> 
     <phone>6316650005</phone> 
     <website>www.trihondadealers.com</website> 
     <Latitude>40.735454</Latitude> 
     <Longitude>-73.255766</Longitude> 
    </marker> 
    <marker> 
     <Name>AUTOSPORT HONDA</Name> 
     <Addr>1051 ROUTE 22 WEST</Addr> 
     <city>BRIDGEWATER</city> 
     <state>NJ</state> 
     <zip>8807</zip> 
     <phone>9087225566</phone> 
     <website>www.trihondadealers.com</website>      
     <Latitude>40.579411</Latitude> 
     <Longitude>-73.344773</Longitude> 
    </marker> 
    <marker> 
     <Name>BABYLON HONDA </Name> 
     <Addr>650 MONTAUK HIGHWAY WEST</Addr> 
     <city>BABYLON</city> 
     <state>NY</state> 
     <zip>11704</zip> 
     <phone>6316698800</phone> 
     <website>www.trihondadealers.com</website>   
     <Latitude>40.686089</Latitude> 
     <Longitude>-73.344773</Longitude> 
    </marker> 
    <marker> 
     <Name>BARON HONDA</Name> 
     <Addr>17 MEDFORD AVENUE </Addr> 
     <city>PATCHOGUE </city> 
     <state>NY</state> 
     <zip>11772</zip> 
     <phone>6314758400</phone> 
     <website>www.trihondadealers.com</website>      
     <Latitude>40.766883</Latitude> 
     <Longitude>-73.006502</Longitude> 
    </marker> 
    <marker> 
     <Name>BAY RIDGE HONDA </Name> 
     <Addr>8801 4TH AVENUE</Addr> 
     <city>BROOKLYN</city> 
     <state>NY</state> 
     <zip>11209</zip> 
     <phone>7188364600</phone> 
     <website>www.trihondadealers.com</website>   
     <Latitude>40.621543</Latitude> 
     <Longitude>-74.028933</Longitude> 
    </marker> 
    <marker> 
     <Name>BREWSTER HONDA</Name> 
     <Addr>899 ROUTE 22</Addr> 
     <city>BREWSTER</city> 
     <state>NY</state> 
     <zip>10509</zip> 
     <phone>8452784100</phone> 
     <website>www.trihondadealers.com</website>      
     <Latitude>41.396642</Latitude> 
     <Longitude>-73.60527</Longitude> 
    </marker> 
    <marker> 
     <Name>BRONX HONDA</Name> 
     <Addr>2541 E. TREMONT AVENUE</Addr> 
     <city>BRONX</city> 
     <state>NY</state> 
     <zip>10461</zip> 
     <phone>7188923300</phone> 
     <website>www.trihondadealers.com</website>      
     <Latitude>40.843148</Latitude> 
     <Longitude>-73.849895</Longitude> 
    </marker> 
    <marker> 
     <Name>CLINTON HONDA</Name> 
     <Addr>1511 ROUTE 22 EAST</Addr> 
     <city>ANNANDALE</city> 
     <state>NJ</state> 
     <zip>8801</zip> 
     <phone>9087350700</phone> 
     <website>www.trihondadealers.com</website>      
     <Latitude>40.645871</Latitude> 
     <Longitude>-74.862583</Longitude> 
    </marker> 
    <marker> 
     <Name>COAST HONDA</Name> 
     <Addr>2110 HWY 35</Addr> 
     <city>SEA GIRT</city> 
     <state>NJ</state> 
     <zip>8750</zip> 
     <phone>7329742211</phone> 
     <website>www.trihondadealers.com</website>      
     <Latitude>40.145289</Latitude> 
     <Longitude>-74.058865</Longitude> 
    </marker> 
    <marker> 
     <Name>CURRY HONDA</Name> 
     <Addr>3845 CROMPOND ROAD</Addr> 
     <city>HEIGHTS</city> 
     <state>NY</state> 
     <zip>10598</zip> 
     <phone>9147397600</phone>   
     <website>www.trihondadealers.com</website> 
     <Latitude>41.293092</Latitude> 
     <Longitude>-73.851313</Longitude> 
    </marker> 
<markers> 

我只加了幾個XML馬以我的xml列表爲例。

回答

0

與您在添加標記時爲每個標記添加相應詳細信息的註冊點擊事件監聽器類似,您應該註冊您的window.telfun函數並參考每個標記及其電話詳細信息。目前,您在覆蓋它的同時添加了每個標記而沒有對標記進行任何引用,最後電話變量具有最後一次寫入的值,即最後一個來自xml的標記。所以,當你點擊任何標記的電話號碼時,它將作用於你手機變量的最後一個值,而不是標記特定值