google map 放張地圖吧(2)

2016-09-12

Marker

Icon

今天來實作Marker

google有提供google map上所有預設的小圖示

小紅標示

好!廢話不多說，我們來看看程式碼吧

首先，下列是定義你要的圖示

//Icon
        var Image = {
            url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",//圖片位置
            size: new google.maps.Size(40, 40),                         //顯示圖片大小
            origin: new google.maps.Point(0, 0),                        //起始位置，通常為0
            anchor: new google.maps.Point(19, 40),                      //移動marker 數字越大往右和往上移動
            scaledSize: new google.maps.Size(40, 40)                    //圖片實際大小，通常與size一樣大小
        };

接著，將圖示放入到Marker中!

//Marker
        var marker = new google.maps.Marker({
            position: curLatLng,            //marker顯示位置
            title: "現在位置",              //屬標放上去會顯示的名稱
            icon: Image,               //可以自訂義，或是使用google預設的幾個marker
            map: map                        //哪個地圖，也就是你要放marker上去的那張地圖
        });

這邊要注意一下，map的宣告位置，map記得都使用同一個，不需要new新的出來。

因為接下來的東西都是會加在這張map上，假如你new了兩個

所有程式碼都必須打兩次。我就是這樣QQ

所以要注意~

<script type="text/javascript">
    var map
    var curLatLng
    $(function () {
        map()
        marker()
    })

    function marker() {
        //Icon
        var Image = {
            url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",//圖片位置
            size: new google.maps.Size(40, 40),                         //顯示圖片大小
            origin: new google.maps.Point(0, 0),                        //起始位置，通常為0
            anchor: new google.maps.Point(19, 40),                      //移動marker 數字越大往右和往上移動
            scaledSize: new google.maps.Size(40, 40)                    //圖片實際大小，通常與size一樣大小
        };
        //Marker
        var marker = new google.maps.Marker({
            position: curLatLng,            //marker顯示位置
            title: "現在位置",              //屬標放上去會顯示的名稱
            icon: Image,               //可以自訂義，或是使用google預設的幾個marker
            map: map                        //哪個地圖，也就是你要放marker上去的那張地圖
        });
    }
    
    function map() {
        //經緯度
        curLatLng = new google.maps.LatLng(25.039993, 121.511983);
        //設定地圖參數
        var mapOptions = {
            zoom: 16,                                //鏡頭遠近，1最遠，20最近
            center: curLatLng,                       //頁面的中心點
            mapTypeId: google.maps.MapTypeId.ROADMAP //正常2D道路模式
        };
        //將上面參數加入MAP中，此為顯示GOOGLE map的重點
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }
</script>

來看看結果吧!

good完成!

google map 上預設圖示，可以參考這

https://sites.google.com/site/gmapsdevelopment/

回首頁