电话号码不从XML数据的信息窗口拨号

时间：2013-07-03 14:44:53

标签： javascript xml google-maps-api-3

我正在使用google maps api v3并使用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制作者作为示例。

1 个答案:

答案 0 :(得分：0)

类似于在添加标记时为每个标记注册具有相应详细信息的点击事件监听器的方式，您应该参考每个标记及其电话详细信息注册window.telfun功能。目前，您在添加每个标记时覆盖它而不引用标记，最后电话变量具有最后写入的值，即xml中的最后一个标记。因此，当您点击任何标记的电话号码时，它将作用于手机变量中的最后一个值，而不是标记特定值

相关问题
最新问题