google地图画范围

翻译 已于 2022-06-10 10:47:05 修改 · 421 阅读 · 0
文章标签：

#js #javascript #google map

于 2016-01-11 10:11:10 首次发布
本文介绍了使用HTML、JavaScript和Google Maps API构建地图交互功能，包括设置坐标、绘制圆圈和标记点，实现地理信息系统的简易应用。

<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" onchange="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> 

Google Maps API 以某一经纬度为中心，以某一长度位半径画圆 Draw the radius of a circle...
Just Code
05-27 1357
直接看代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;title&gt; - jsFiddle demo&lt;/title&gt; &lt;
google 地图， 画圆的问题，ios开发
u011986468的博客
08-29 2766
由于本次项目 需要在国外使用，所以最后选取的是使用google地图，google的地图怎么导入工程这里就不说了，网上有很多，官网也给出了cocoapods的例子。可能你需要考虑被墙的原因，我这里是使用framework导入的方式，地图版本 GoogleMaps.1.13.2。 这里说的是一个关于谷歌地图上画圆的方法，并且符合地图的缩放层级，圆在地图上的半径 ，符合自己设置的公里数半径。
百度地图圈出一个范围
07-01
以一个经纬度为圆心，传入一个半径，画出一个圆
地图划范围
weixin_45932157的博客
09-26 557
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=a2090e4b4d224bc6d7956112cdd1b763"></script> <script src="/Content/js/jquery-1.9.1.js"></script> <script> window.onload = function () {
google地图的切图规范以及技术原理
08-20
google 地图的切图规范说明。介绍 Google map 切图方式 ，切图原理。
canvas-markers:用于 Google 地图的基于画布的地图标记
06-07
在本文中，我们将深入探讨“canvas-markers”这一专为Google地图设计的JavaScript库，它提供了基于HTML5画布的自定义地图标记功能。通过使用画布标记，开发者可以实现更高效、更灵活且视觉效果丰富的地图应用。 一...
leaflet谷歌地图画缩放范围
最新发布
12-02
在使用Leaflet结合Google Maps API时，你可以设置地图的缩放范围（zoom level）。`setView()`方法允许你指定初始视图的位置和缩放级别。例如： ```javascript var map = L.map('map').setView([51.505, -0.09], 13)...
百度地图打标记并圈出范围（米）
05-11
本教程将详细讲解如何在百度地图和Google Map上实现打标记并圈出特定范围的功能，这是一个非常实用的功能，例如用于定位服务、商业区域划分或者地理信息分析。 首先，我们要了解的是百度地图API和Google Maps ...
python 谷歌地图_google地图 api python
weixin_39541227的博客
12-18 822
python常用框架Django: Python Web应用开发框架Django 应该是最出名的Python框架，GAE甚至Erlang都有框架受它影响。Django是走大而全的方向，它最出名的是其全自动化的管理后台：只需要使用起ORM，做简单的对象定义，它就能自动生成数据库结构、以及全功能的管理后台。在Restf...文章武耀文2018-06-293339浏览量转载：15个最受欢迎的Python...
Android百度地图水波纹动画,高德地图实现水波纹扩散
weixin_28719225的博客
05-26 1156
功能修改，要求在地图上有个类似雷达的水波纹扩散的动画，通过大半天时间的研究、查找，终于完成了这项任务，话不多说，下面直接贴出代码，供有需要的兄弟参考,1、首先在地图上画个圆如下图 2、新建个JS/*校验时间 End*/var timeStart, timeEnd, time;//申明全局变量var radius = 300 //水纹圆半径(300米)var circles1; //探测出入口的水...
谷歌地图相关dome （主要是利用谷歌地图进行多边形绘画）
A1270157189的博客
07-04 1655
Html <!DOCTYPE html> <html> <head> <title>googel Map</title> <!-- <meta name="viewport" content="initial-scale=1.0"> --> <meta charset="utf-8...
研究Google maps及51ditu的图片切割及存储方法
maniacbin
06-09 454
Google maps切割方法<br /><!--[if !supportLists]-->1.         <!--[endif]-->缩放等级与图幅数       <br />Google maps的缩放等级是0-17共18个等级，比例尺与缩放等级是成反比的（比例尺越大地图越详细），其第17等级只有一幅世界地图，某一等级下所含地图数的计算公式为 2<!--[endif]-->^(17-n)^2（n为缩放等级）。<br /><!--[if !supportLists]-->2.         <!-
百度地图画出区域并获取区域坐标范围
weixin_33681778的博客
02-04 1030
转载自：http://blog.youkuaiyun.com/zzq900503/article/details/21714491   API原型 http://developer.baidu.com/map/jsdemo.htm#f0_7 效果如图:   源代码，新建为html可用：（注意  百度地图密钥需要自己的百度帐号开通申请一下） [java] view plain copy &lt;...
google map限制地图缩放级别和显示范围
binyao02123202的专栏
03-12 5215
google map限制地图缩放级别和显示范围 在使用google地图的时候，很多情况下我们希望只显示地图的一部分并限制地图的缩放级别。这个时候就需要自定义google map的地图缩放级别和显示范围。 自定义地图缩放范围 控制地图的缩放级别范围需要重载GMapType的getMinimumResolution()和getMaximumResolution()方法。下面的代码将地
js基于谷歌地图API绘制可编辑圆形与多边形
dianyuzhi7625的博客
08-25 637
之前的工作中需要在谷歌地图上绘制可编辑多边形区域，所以基于谷歌地图API封装了个html页面，通过调用js绘制多边形并返回各点的经纬度坐标；当然首先你要保证你的电脑可以打开谷歌地图。。。 新建一个html页面 <!DOCTYPE html> <html> <head> <title>googel Map</tit...
Google map地图限制显示区域、拖拽范围
FORLOVEHUAN的博客
07-23 2642
根据坐标限制显示区域、限制地图拖拽范围 function moveLimit(){ var strictBounds = new google.maps.LatLngBounds( new google.maps.LatLng(36.54539,120.02950), //左下 new google.maps.LatLng(36.41766,120.16442)//右上 ); googl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值