GOOGLE MAP (整理中)

v2 跟 v3

因為 v2 版 不需要金鑰 已經不能使用了

而v3版本 必須要搭配金鑰

所以有流量限制 25000次/日

申請金鑰

首先你要有一個 女碰友 Google帳號

官網超簡單流程

使用函式庫

  1. jquery
  2. maps.googleapis.com/maps/api/js?key=自己取得
  3. markerclusterer (要做叢集才需要)
  4. Libraries=geometry (參數,計算距離才要)

markerclusterer 叢集函式

官方範例教學 官方參數文件

以下亂七八糟資料 (暫存)

// 必要
#map{width: auto;height:500px;}
// 可選
.label{font-size: 13px;background: rgba(22,22,22,0.6);
color: #fff;padding-top: 0.25em;padding-right: 0.5em;
padding-bottom: 0.25em;padding-left: 0.5em;    border-radius: 3px;font-family:Microsoft JhengHei;}
a {color: #516F9E;text-decoration: none;}
    // 看你要放甚麼資料
    var markerlist=[
     {'addr':[地址], 'text': '<a href="XXX.html" target="_blank">瀏覽資料</a>',newLabel: 'tpl_title',newLabelCSS: 'label'},
     ];

    /**
     * 取得最北最南最東最西
     */
    function bound(latitude,longitude,radius)
    {
    var bound = [],
    l = 1000 * 111,
    latx = radius/l,
    lagx = latx / Math.cos(latitude),
    latN = latitude + Math.abs(latx),
    latS = latitude - Math.abs(latx),
    lagE = longitude+ Math.abs(lagx),
    lagW = longitude- Math.abs(lagx);

    bound.latN = latN;
    bound.latS = latS;
    bound.lagE = lagE;
    bound.lagW = lagW;

    console.log(bound);
    return bound;
    }
    /**
     * 抓取現在位置 並將周圍地點取得
     * @param  {class} map [地圖]
     * @return {viod}     
     */
    function glocation(map) {
        var uus="https://www.googleapis.com/geolocation/v1/geolocate?key=TOKEN(自己取得)";

        $.ajax({
            url: uus,
            type:"POST",
            dataType:'json',
            success:function (msg) {
                console.log(msg);
                map.setCenter(msg.location);  //將地圖中心定位到查詢結果
                map.setZoom(13);  //將地圖中心定位到查詢結果

                // 中心點座標
                var latLngstart = new google.maps.LatLng(msg.location.lat,msg.location.lng);

                // 圓餅的基本資料
                var populationOptions = {
                strokeColor  : "#FF0000",   // 顏色
                strokeOpacity: 0.8,
                strokeWeight : 2,
                fillColor    : "#FF0000",
                fillOpacity  : 0.35,
                map          : map,         // 地圖
                center       : latLngstart, // 中心點
                radius       : 4000       //方圓直徑 //msg.accuracy是google抓取現在位置的相差
                };

                // 不用bb了
                // bb=bound(msg.location.lat,msg.location.lng,4000);

                // 標記廟宇 (地圖,起始點,方圓直徑)
                markerr(map,latLngstart,4000);

                // 劃圓
                if(typeof(cityCircle)!=="undefined") cityCircle.setMap(null);
                cityCircle = new google.maps.Circle(populationOptions);


            }
        });
    }
    /**
     * 搜尋結果
     * @param  {[type]} map [description]
     * @return {[type]}     [description]
     */
      function searchset(map){
        var latLngstart = new google.maps.LatLng(markerlist[0].addr[0],markerlist[0].addr[1]);
        map.setCenter(latLngstart);  //將地圖中心定位到查詢結果
        map.setZoom(11);  //將地圖中心定位到查詢結果

        // 標記 (地圖,起始點,方圓直徑)
        var markers = [];
        for (var i = 0; i < markerlist.length; i++) {
          var data = markerlist[i];
          add_location(data.text,data.addr[0],data.addr[1]);
        }
        set_current_location(map);
      }

    // 設置消息
    function attachSecretMessage(marker, secretMessage, map, latLng) {
      var infowindow = new google.maps.InfoWindow({
        content: secretMessage
      });

      marker.addListener('click', function() {
        infowindow.close();
        infowindow.open(marker.get('map'), marker); //打開marker
        map.panTo(latLng); //移動畫面到定位
        });
    }
    /**
     * markerr 標記座標
     * @param  {Closure} map         [地圖]
     * @param  {Closure} latLngstart [使用者的中心點]
     * @param  {int} long        [許可標記距離使用者中心的方圓半徑]
     */
    function markerr(map,latLngstart,long){


        var markers = [];
        for (var i = 0; i < markerlist.length; i++) {
          var data = markerlist[i];

        var latLng = new google.maps.LatLng(data.addr[0],data.addr[1]);
        var longadd=google.maps.geometry.spherical.computeDistanceBetween(latLngstart,latLng);
        if(longadd<=long){
        var marker = new google.maps.Marker({
             // draggable:true,
             position: latLng,
             map:map
            }); 

        attachSecretMessage(marker,data.text, map, latLng);
          }

          // markers.push(marker); // 叢集
          // }
        }
        // var markerCluster = new MarkerClusterer(map, markers); // 叢集

    }

    var locations = [];

    // add new location to the locations array
    function add_location(description, lastitude, longtitude) {
        locations.push([description, lastitude, longtitude]);
        console.log('#locations: ' + locations.length);
        console.log(locations);  
    }

    // Set all the markers in the location arrays and bound/frame the map
    function set_markers(bounds, map) {
        console.log('#locations: ' + locations.length);
        console.log(bounds);
        var infowindow=new google.maps.InfoWindow();

        for (var i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });
            bounds.extend(marker.position);
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
        map.fitBounds(bounds);
    }

    // Get current location based on the IP Address
    function set_current_location(map) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                /*
                var pos = new google.maps.LatLng(position.coords.latitude,
                                                 position.coords.longitude);
                var myLat = position.coords.latitude;
                var myLong = position.coords.longitude;
                */
                add_location('My location', 
                            position.coords.latitude, 
                            position.coords.longitude);

                set_markers(new google.maps.LatLngBounds(), map);
            }, function error(err) {
                console.log('error: ' + err.message);
                set_markers(new google.maps.LatLngBounds(), map);            
            });
        } else {
            alert("Geolocation is not supported by this browser.");
            //set_markers(new google.maps.LatLngBounds(), map);
        }
    }


    //初始化地圖
      function initialize() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -23.961181, lng: 120.679914},//center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        <?php
        if(0){
          echo 'searchset(map);'; // 使用者搜尋關鍵字
        }else{         
          echo 'glocation(map);';// 取得使用者的座標
        } 
        ?>
      }

      google.maps.event.addDomListener(window, 'load', initialize);
<!-- 地圖初始點 -->
<div id="map"></div>

results matching ""

    No results matching ""