谷歌地图测试 

 <!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas
        {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var markers = [
                    { "id": "1", "ilAdi": "ADANA", "lat": "36.989271142397", "lng": "35.371719723438", "toplam": "15" },
                    { "id": "5", "ilAdi": "AMASYA", "lat": "40.64991", "lng": "35.83532", "toplam": "1" },
                    { "id": "6", "ilAdi": "ANKARA", "lat": "39.921691562709", "lng": "32.78596043335", "toplam": "3" },
                    { "id": "7", "ilAdi": "ANTALYA", "lat": "36.822603262281", "lng": "31.400515253906", "toplam": "3" },
                    { "id": "9", "ilAdi": "AYDIN", "lat": "37.8117033", "lng": "28.4863963", "toplam": "2" },
                    { "id": "10", "ilAdi": "BALIKES\u0130R", "lat": "39.648369", "lng": "27.88261", "toplam": "1" },
                    { "id": "16", "ilAdi": "BURSA", "lat": "40.164126009004", "lng": "29.013311650391", "toplam": "10" },
                    { "id": "17", "ilAdi": "\u00c7ANAKKALE", "lat": "40.155312", "lng": "26.41416", "toplam": "1" },
                    { "id": "19", "ilAdi": "\u00c7ORUM", "lat": "40.5505556", "lng": "34.9555556", "toplam": "1" },
                    { "id": "22", "ilAdi": "ED\u0130RNE", "lat": "41.6818079", "lng": "26.562269", "toplam": "2" },
                    { "id": "26", "ilAdi": "ESK\u0130\u015eEH\u0130R", "lat": "39.784302", "lng": "30.51922", "toplam": "1" },
                    { "id": "27", "ilAdi": "GAZ\u0130ANTEP", "lat": "37.06622", "lng": "37.38332", "toplam": "1" },
                    { "id": "32", "ilAdi": "ISPARTA", "lat": "37.764771", "lng": "30.556561", "toplam": "1" },
                    { "id": "33", "ilAdi": "\u0130\u00c7EL", "lat": "36.804204", "lng": "34.638567", "toplam": "4" },
                    { "id": "34", "ilAdi": "\u0130STANBUL", "lat": "40.988167956783", "lng": "29.089569863281", "toplam": "198" },
                    { "id": "35", "ilAdi": "\u0130ZM\u0130R", "lat": "38.41471416618", "lng": "27.060666992874", "toplam": "1" },
                    { "id": "39", "ilAdi": "KIRKLAREL\u0130", "lat": "41.7333333", "lng": "27.2166667", "toplam": "2" },
                    { "id": "40", "ilAdi": "KIR\u015eEH\u0130R", "lat": "39.14249", "lng": "34.17091", "toplam": "1" },
                    { "id": "41", "ilAdi": "KOCAEL\u0130", "lat": "40.8532704", "lng": "29.8815203", "toplam": "6" },
                    { "id": "43", "ilAdi": "K\u00dcTAHYA", "lat": "39.4166667", "lng": "29.9833333", "toplam": "1" },
                    { "id": "45", "ilAdi": "MAN\u0130SA", "lat": "38.619099", "lng": "27.428921", "toplam": "1" },
                    { "id": "47", "ilAdi": "MARD\u0130N", "lat": "37.3211634", "lng": "40.7244774", "toplam": "2" },
                    { "id": "48", "ilAdi": "MU\u011eLA", "lat": "36.873838776512", "lng": "28.82503688125", "toplam": "1" },
                    { "id": "59", "ilAdi": "TEK\u0130RDA\u011e", "lat": "41.099341237277", "lng": "27.491947461719", "toplam": "3" },
                    { "id": "67", "ilAdi": "ZONGULDAK", "lat": "41.356497237829", "lng": "31.768518597656", "toplam": "1" },
                    { "id": "68", "ilAdi": "AKSARAY", "lat": "38.36869", "lng": "34.03698", "toplam": "1" },
                    { "id": "71", "ilAdi": "KIRIKKALE", "lat": "39.846821", "lng": "33.515251", "toplam": "1" },
                    { "id": "74", "ilAdi": "BARTIN", "lat": "41.641521", "lng": "32.345581", "toplam": "1" }
                 ];
        var map;
        function initialize() {

            var myLatlng = new google.maps.LatLng(39.01440707292626, 35.30710437500001);
            var myOptions = { zoom: 6, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
            map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
            setTimeout(parseAdres, 500);

        google.maps.event.addListener(map, 'click', function(event) {

            placeMarker(event.latLng);
            
          });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location,
      map: map
  });
    new google.maps.InfoWindow(
      { content: ""+location,
        size: new google.maps.Size(50,50)
      }).open(map,marker);
  //map.setCenter(location);
}




        function parseAdres() {
            for (var i = 0; i < markers.length; i++) {
                var mrklatlng = new google.maps.LatLng(markers[i].lat, markers[i].lng);
                var mrkicon = new google.maps.MarkerImage("shara.gif", new google.maps.Size(40, 50), new google.maps.Point(0, 0));
                var markerOptions = { map: map, position: mrklatlng, visible: true, icon: mrkicon, title: markers[i].toplam + " Satış Noktası, görmek için tıklayınız." };
                temp = new google.maps.Marker(markerOptions);
                temp.il_id = markers[i].id; 
　　　　　　　　　　google.maps.event.addListener(temp, "click", function (e) {
                    map.setCenter(e.latLng);
                    ilsec(this.il_id);
                });
            }
        }
        function ilsec(id) {
            var dataString = "il=" + id;
            $("#bayiler").html("数据"+id);            
            $("html,body").animate({ scrollTop: $("#bayiler").offset().top - 60 }, 1000);
        }





    </script>
</head>
<body>
    <div id="map-canvas">
    </div>
    <div id="bayiler">kk</div>
</body>
</html>

 

posted @ 2013-05-30 13:26  一千零一夜  阅读(380)  评论(0)    收藏  举报