google地图画范围

<html> 

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

 <script language="javascript" src="jquery-1.4.1.min.js" 

                type="text/javascript"></script>

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" 

                type="text/javascript"></script>

 <script src="GoogleMapV3.js" type="text/javascript"></script> 

<script type="text/javascript"> 

function setLatLongValue() {

    jQuery('#txtPointA1').val(currentlatlng.lat());

    jQuery('#txtPointA2').val(currentlatlng.lng());

var map;

var circle;

var marker;

var currentlatlng = new google.maps.LatLng(23.06368, 72.53135);

var infowindow;

function loadMap() {

    setLatLongValue();

    var mapOptions = {

        zoom: 16,

        center: currentlatlng,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

setMarker();

/**

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

        currentlatlng = e.latLng;

        if (currentlatlng) {

            map.panTo(currentlatlng);

            setLatLongValue();

            setMarker();

        }

    });

*/

}  

function drawCircle() {

    if (circle != undefined)

        circle.setMap(null);

    var radius = 200;

    if (jQuery('#txtPointB1').val() != '' && !isNaN(jQuery('#txtPointB1').val()) && parseInt(jQuery('#txtPointB1').val()) > 0) {

        radius = parseInt(jQuery('#txtPointB1').val());

    }

    jQuery('#txtPointB1').val(radius.toString());

    var options = {

        strokeColor: '#800000',

        strokeOpacity: 1.0,

        strokeWeight: 1,

        fillColor: '#C64D45',

        fillOpacity: 0.5,

        map: map,

        center: currentlatlng,

        radius: radius

    };

    circle = new google.maps.Circle(options);

circle.setEditable(true);

google.maps.event.addListener(circle, 'radius_changed', function () {

            radius = parseInt(circle.getRadius());

document.getElementById('txtPointB1').value = radius;

        });

function setMarker() {

    if (marker != undefined)

        marker.setMap(null);

    marker = new google.maps.Marker({

        position: currentlatlng,

        draggable: true,

icon:'none',

        map: map

    });

    if (marker) {

        google.maps.event.addDomListener(marker, "dragend", function () {

            currentlatlng = marker.getPosition();

            setLatLongValue();

            drawCircle();

        });

        drawCircle();

    }

google.maps.event.addListener(marker, "click", function () {

        var data = '<div>Current LatLong:</div><div>' + currentlatlng + '</div>';

        infowindow = new google.maps.InfoWindow({

            content: data,

            position: currentlatlng

        });

        infowindow.open(map);

    });  

</script> 

</head> 

<body> 

  <style> 

  </style>

   <input type="text" ID="txtPointA1"  />

    <input type="text" ID="txtPointA2"  />

 <input type="text" ID="txtPointB1" οnchange="drawCircle();"  />

<input type="text" ID="sliderRadius" />

                        

<input type="text" ID="txtRadiusShow" />

   <div id="map" style="height:100%"></div>

    

</body> 

</html> 

<script type="text/javascript" language="javascript">

        $(window).load(function () {

            loadMap();          

        });

    </script> 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值