04 mapGoogle 示例 leo

最新推荐文章于 2022-12-06 15:16:19 发布
wei198621
最新推荐文章于 2022-12-06 15:16:19 发布
阅读量737
点赞数
分类专栏： GIS 地图
本文链接：https://blog.csdn.net/wei198621/article/details/32336003
版权
GIS 地图专栏收录该内容
5 篇文章
订阅专栏
//在线的帮助文档，官方的，很全面   https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN                   
//  在线的帮助文档，国人自己改的，很全面  http://www.tuicool.com/articles/JrumQv

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dituGoogle.aspx.cs" Inherits="Test_dituGoogle" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
     <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false"></script>
     <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=drawing"></script>
     <%--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>--%>
   
</head>
<body>
    <div id="map_canvas"  style="width: 800px; height: 600px"></div>
    <a href="#this" onclick="stoplistener()">关闭监听</a> <a href="#this" onclick="startlistener()">重启监听</a> 

</body>
 <script type="text/javascript">
     var mapGoogle = null;           //mapGoogle;
     var markerGoogle = null;        //标记
     var infoWindowGoogle = null;    //infoWindow
     var polylineGoogle = null;      //在地图上画折线的叠加层
     var arrPolygonPoints = [];          //多边形点数组   
     var arrPolylinePoints = [];         //折线数组   
     var polygonGoogle = null;           //多边形
     var polylineGoogle = null;          //折线
     var listenerGoogle;                 //监听

     var startLng = 117.18993830481;
     var startLat = 34.257423330251;
     var offsetX = 0;
     var offsetY = 0;
     var defaultIconPath = "/images/defaut/veh_ya.png";
     var smallIconPath = "/images/gongzuo.png";

     //知识点1：MVCObject  是map  marker latlnt等所有对象的基类
     //知识点2：***Option.map==***.setMap()      map属性==setMap方法
     $(function () {
         initializeMapGoogle();                  //初始化加载地图                 01
         AddMarkPolylinePolygonInfowindow();     //加点 点监听弹出 infoWindow     02
         listenerGoogle = google.maps.event.addListener(mapGoogle, "click", listenerEvent); //03 监听click事件（加点、加线）
         //AddDrawImage();           //04  绘图按钮  与AddMarkPolylinePolygonInfowindow有冲突，不可以同时使用
     });


     //01   初始化加载地图   
     function initializeMapGoogle() {
         var latlng = new google.maps.LatLng(startLat, startLng);
         var myOptions =
             {
                 zoom: 13,    //zoom表示地图的缩放比例 0级地图最详细，15级地图最简单
                 center: latlng,
                 mapTypeId: google.maps.MapTypeId.TERRAIN,
                 //ROADMAP，用于显示默认的道路地图视图 ;SATELLITE，用于显示 Google 地球卫星图像;
                 //HYBRID，用于同时显示普通视图和卫星视图; TERRAIN，用于根据地形信息显示实际地图;
                 scaleControl: true,    //比例尺
                 mapTypeControl: true,  //卫星图 地图       
                 disableDefaultUI: true
             };
         mapGoogle = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
         mapGoogle.panTo(latlng);             //将地图中心更改为指定的 LatLng。        
     }

     //02    加点 点监听弹出 infoWindow 
     function AddMarkPolylinePolygonInfowindow() {
         //*******************  02给地图打点 ********************
         var markerIcon = new google.maps.MarkerImage(defaultIconPath);
         var markerOpt = {
             position: new google.maps.LatLng(parseFloat(startLat), parseFloat(startLng)), //标记位置。必填
             map: mapGoogle, //待显示标记的地图，也可以用_marker.setMap(_map); *****知识点2
             title: "I am a Marker;", //鼠标经过或者悬停在上面就会显示title的值
             //Draggable: true, //是否可移动，默认false
             //animation: google.maps.Animation.DROP,//图片显示的效果坠下
             //Flat: true,
             //Shadow: markerIcon,
             icon: markerIcon           // icon: defaultIconPath //前景的图标
         };
         markerGoogle = new google.maps.Marker(markerOpt);
         //markerGoogle.setMap(mapGoogle);    //创建标记         *****知识点2
         //markerGoogle.seMap(null);          //移除标记


         //*************03给点增加弹出框addListener  infoWindow **********************
         var infoWindowOpt = {
             content: "I am a trunk",
             pixelOffset: new google.maps.Size(offsetX, offsetY) //偏移量 （x,y） x 值从西向东增加，y 值从北向南增加。
         };
         infoWindowGoogle = new google.maps.InfoWindow(infoWindowOpt);
         //注册javascript时间侦听器
         google.maps.event.addListener(markerGoogle, 'click', function () {
             infoWindowGoogle.open(mapGoogle, markerGoogle);
         });

         //******************* 04添加折线叠7字形  ********************
         var polyLinePath = [
             new google.maps.LatLng(parseFloat(startLat), parseFloat(startLng)),
             new google.maps.LatLng(parseFloat(startLat), parseFloat(startLng - 0.02)),
             new google.maps.LatLng(parseFloat(startLat - 0.03), parseFloat(startLng - 0.02))
         ];
         var arrPolyLinePath = new Array();
         arrPolyLinePath.push(new google.maps.LatLng(parseFloat(startLat), parseFloat(startLng)));
         arrPolyLinePath.push(new google.maps.LatLng(parseFloat(startLat), parseFloat(startLng - 0.02)));
         arrPolyLinePath.push(new google.maps.LatLng(parseFloat(startLat - 0.03), parseFloat(startLng - 0.02)));

         var polyLineOpt = {
             path: polyLinePath,                                   //与001相互替换
             map: mapGoogle,                                       //与003相互替换
             strokeColor: "#ff0000",
             strokeOpacity: 0.6,
             strokeWeight: 5
         };
         polylineGoogle = new google.maps.Polyline(polyLineOpt);    //与002相互替换
         //         polylineGoogle = new google.maps.Polyline();
         //         polylineGoogle.setPath(arrPolyLinePath);        //与001相互替换
         //         polylineGoogle.setOptions(polyLineOpt);         //与002相互替换
         //         polylineGoogle.setMap(mapGoogle);               //与003相互替换

     }

     //03      监听click事件（加点、加线） 
     function listenerEvent(event) {
         showMarker(event.latLng);
        // drawPolyline(event.latLng);
         drawPolygon(event.latLng);
     }

     //0301  显示标记
     function showMarker(location) {
         //var clickedLocation = new google.maps.LatLng(lat,lng);
         var clickedLocation = location;
         var mymarker = new google.maps.Marker({
             position: clickedLocation,
             icon: smallIconPath,
             animation: google.maps.Animation.BOUNCE,
             map: mapGoogle
         });
     }
     //0302 显示折线
     function drawPolyline(location) {
         if (polylineGoogle != null) {
             polylineGoogle.setMap(null);
         }
         var lineSymbol = {
            path: 'M 0,-1 0,1',
            strokeOpacity: 1,  
            scale: 4
            }; 
         var lineSymbol2 = {
         path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW   //箭头符号
         };
         arrPolylinePoints.push(location);
         polylineGoogle = new google.maps.Polyline({
             path: arrPolylinePoints,
             map: mapGoogle,
             icons: [{
                 icon: lineSymbol,
                 repeat: '20px',
                 offset: '90%'     //箭头位置
             }
             ],
             strokeColor: '#ff0000',
             fillColor: '#ff0000',
             strokeOpacity: 0.6,
             strokeWeight: 5
         });
     }
     //0303显示多边形
     function drawPolygon(location) {
         if (polygonGoogle != null) {
             polygonGoogle.setMap(null);
         }
         arrPolygonPoints.push(location);
         polygonGoogle = new google.maps.Polygon({
             path: arrPolygonPoints,
             map: mapGoogle,
             strokeColor: '#ff0000',
             fillColor: '#ff0000',
             strokeOpacity: 0.6,
             strokeWeight: 5
         });
     }
     
     //04  绘图事件
     function AddDrawImage() {
         //http://ditu.google.cn/maps/api/js?sensor=false&libraries=drawing   注意要添加
         //         var drawingManager = new google.maps.drawing.DrawingManager();
         //         drawingManager.setMap(mapGoogle);
         var drawingManager = new google.maps.drawing.DrawingManager({
             drawingMode: google.maps.drawing.OverlayType.MARKER,
             drawingControl: true,
             drawingControlOptions: {
                 position: google.maps.ControlPosition.TOP_CENTER,
                 drawingModes: [google.maps.drawing.OverlayType.MARKER,
                 google.maps.drawing.OverlayType.CIRCLE
                 ]
             },
             markerOptions: {
                 icon: new google.maps.MarkerImage('http://www.example.com/icon.png')
             },
             circleOptions: {
                 fillColor: '#ffff00',
                 fillOpacity: 1,
                 strokeWeight: 5,
                 clickable: false,
                 zIndex: 1,
                 editable: true
             }
         });
         drawingManager.setMap(mapGoogle);

         google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
             var radius = circle.getRadius();
             alert(radius);
         });

         google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
             if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
                 var radius = event.overlay.getRadius();
             }
         });
     }


     //删除监听程序
     function stoplistener() {
         google.maps.event.removeListener(listenerGoogle);
     }
     //开始监听程序
     function startlistener() {
         listenerGoogle = google.maps.event.addListener(mapGoogle, 'click', function (event) {
             var lat = event.latLng.lat();
             var lng = event.latLng.lng();
             // 直接传event.latLng ,函数中找不到值
             showMarker(event.latLng);
             drawPolygon(event.latLng);
         });
     }

 </script>
 
    
</html>