0

我正在使用 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>

我的

<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 制造商。

4

1 回答 1

0

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

于 2013-07-03T17:12:21.900 回答