首頁 > 其他

Google Maps V3 矩形電子圍欄實現

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

    很多地圖定位等需要有電子圍欄功能，正巧最近在做某個定位項目也需要這個功能。google了一下沒發現好用的代碼只好寫自己一個了。

 

     很簡單，直接上代碼

 

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Marker Simple</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() {
    var myLatlng = new google.maps.LatLng(29.678815, 121.426489);
    var myOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "Hello World!"
    });
    
    var rectangle = new google.maps.Rectangle();    
    var rectOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        clickable:false,
        bounds: map.getBounds()
    };
    
    var beginlatlng = ""; //記錄起始點座標
    var endlatlng = ""; //記錄結束點座標
    var rectBounds = "";
    var SfClick = "";
    var SfMove = "";
    var ClickCount = 0; //點擊次數    
    SfClick = google.maps.event.addListener(map, 'click', function(e) {
        var begin = e.latLng;
        ClickCount++;
        if (ClickCount == 1) {
            SfMove = google.maps.event.addListener(map, "mousemove",function(e) {
                beginlatlng = begin;
                endlatlng = e.latLng;
                rectOptions.bounds = new google.maps.LatLngBounds(beginlatlng, endlatlng);
                rectOptions.map = map;
                rectangle.setOptions(rectOptions);
            });
        } else {
            google.maps.event.removeListener(SfMove);
            if (window.confirm("確定該電子圍欄範圍嗎？")) {
                ClickCount = 0;
                alert('起始座標點' + beginlatlng + '\n結束座標點' + endlatlng)
            } else {
                ClickCount = 0;
                rectOptions.map = null;
                rectangle.setOptions(rectOptions);
            }
        }
    });
}
</script> 
</head> 
<body onLoad="initialize()"> 
  <div id="map_canvas"></div> 
</body> 

</html>  

 

 http://www.cnblogs.com/relax/archive/2011/08/24/2151838.html  

 注意 Rectangle 的clickable一定要設定為falsh，否則矩形結束不了。如果您在轉載的時候能帶上出處最好

 

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More