`
kzerg
  • 浏览: 25811 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

google map 基础函数使用备忘

google mapjavascript备忘 
阅读更多
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
<link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsconf/mapapi.js"></script>
<script type="text/javascript" src="jsconf/jquery.min.js"></script>
<script>
var markersArray = [];
  var arrInfoWindows = [];


  function CoordMapType(tileSize) {
    this.tileSize = tileSize;
  }

  CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    var ymax = 1 << zoom;
var y = ymax - coord.y - 1;

    div.innerHTML = coord.x + "," + y + "," + zoom;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.fontSize = '10';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.borderColor = '#AAAAAA';
    return div;
  };
 
  function LocalMapType() {}
 
  LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
  LocalMapType.prototype.maxZoom = 10;
  LocalMapType.prototype.minZoom = 6;
  LocalMapType.prototype.name = "本地";
  LocalMapType.prototype.alt = "显示本地地图";
  LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
      var img = ownerDocument.createElement("img");
      img.style.width = this.tileSize.width + "px";
      img.style.height = this.tileSize.height + "px";
     
      var ymax = 1 << zoom;
var y = ymax - coord.y - 1;

      var strURL = "tilemap\\" + zoom + "\\" + coord.x + "\\" + y + ".png";
       
      img.src = strURL;
      return img;
  };
 
  var localMapType = new LocalMapType();
var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(34.611, 108.935);
    var myOptions = {
      center: myLatlng,
      zoom: 6,
      streetViewControl: false,
      scaleControl: true,
      mapTypeControl: false,
      mapTypeControlOptions: {
            mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP]
        }
    };

    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    //map.setMapTypeId('satellite');
    //map.MapTypes.insertAt(0, moonMapType);
    map.mapTypes.set('local', localMapType);
    map.setMapTypeId('local');
    map.overlayMapTypes.insertAt(0, new CoordMapType(new

google.maps.Size(256, 256)));
    //添加事件监听

    google.maps.event.addListener(map, 'click', function(event) {
      clearMarkersBefore();
      placeMarker(event.latLng);
    });
//map.disableDoubleClickZoom();
//map.enableContinuousZoom();
    var myLatlng1 = new google.maps.LatLng(33.001, 109.005);
map.panTo(myLatlng1 ) ;//移动
//map.panDirection(1, 0) ;//动画移动
new CustomMarker( myLatlng1 , map);
//标准放置标记方法
var beachMarker = new google.maps.Marker({        
     position: myLatlng ,        
     map: map,   
    title:"上海市普陀区兰溪路137号曹杨商城4-5楼", 
     icon: 'images/1.png'  
});
//批量添加标记,也是循环..效率问题???
setMarkers(map, locations,'images/1.png');

  }

function CustomMarker(latlng,map) {
         this.latlng_ = latlng;
         this.setMap(map);
      }
    //扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自

MVCObject
    CustomMarker.prototype = new google.maps.OverlayView();

    CustomMarker.prototype.draw = function() {
    var me = this;
    var div = this.div_;
    if (!div) {
        div = this.div_ = document.createElement('DIV');
        div.style.position = "absolute";
        div.innerHTML = "<span><img src='images/1.png'/></span>";
        //这个div的对象需要Listener事件，必须先用trigger（me）先进行侦听
        google.maps.event.addDomListener(div, "click", function(event) {
            google.maps.event.trigger(me, "click");
        });
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }
    CustomMarker.prototype.remove = function() {
        if (this.div_) {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
        }
    };
    //获取Position
    CustomMarker.prototype.getPosition = function() {
        return this.latlng_;
    };
}

//放置marker
  function placeMarker(location) {
    var clickedLocation = new google.maps.LatLng(location);
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markersArray.push(marker);

//这里根据用户操作，将经纬度取出来，并复制到input中。
    $("#geo-lat").val(marker.getPosition().lat());
    $("#geo-lng").val(marker.getPosition().lng());
};

//清除marker，这个函数需要使用，不然你的鼠标点击之处，都有标记，而你只需要一个

。
   function clearMarkersBefore() {
    if (markersArray) {
      for (i in markersArray) {
        markersArray[i].setMap(null);
      }
      markersArray.length = 0;
    }
  };

var locations = [ 
   ['上海市普陀区兰溪路137号曹杨商城4-5楼', 31.239311, 121.405159, 4], 
   ['大兴街18号华联吉买盛内', 31.21354,121.488482, 5], 
   ['陕西北路1622号2-3楼', 31.245205,121.439846, 14] 
]; 
//多个标记批量添加
function setMarkers(map, locations,image) { 
   for (var i = 0; i < locations.length; i++) { 
     var beach = locations[i]; 
     var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
     var marker = new google.maps.Marker({ 
         position: myLatLng, 
         map: map, 
         icon: image, 
         title: beach[0], 
         zIndex: beach[3] 
     }); 
   } 
}


  $(function(){
    //初始化地图
    initialize();

  });

  </script>
</head>
<body >
  <div id="map_canvas" style="width: 640px; height: 480px;"></div>
</br>获取经纬度
        <input id="geo-lat" type="text"name="latitude" value=""/>
        <input id="geo-lng" type="text"name="longitude" value=""/>

</body>
</html>
分享到：
| google map proj.
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    详解Python map函数及Python map()函数的用法

    例如，如果我们有一个列表`[1, 2, 3, 4, 5, 6, 7, 8, 9]`，想计算每个元素的平方，可以定义一个函数`f(x) = x * x`，然后使用`map(f, [1, 2, 3, 4, 5, 6, 7, 8, 9])`。这样，`map()`会返回一个新的列表`[1, 4, 9, 16...

    c _map_函数.doc

    使用 insert 函数插入数据时，如果 Map 中已经存在相同的关键字，插入操作将失败。使用数组方式插入数据时，如果 Map 中已经存在相同的关键字，新的值将覆盖旧的值。 Map 的其他操作 ----------------- 除了插入...

    Google Map API 使用示例

    Google Map API 是一款强大的工具...通过学习和实践这些示例，你可以熟练掌握 Google Map API 的基础和高级功能，从而在各种项目中灵活应用。记住，始终要关注 API 的使用限制和最佳实践，以确保服务的稳定性和高效性。

    googleMap测距计算函数

    根据提供的文件信息，本文将详细解释“Google Map测距计算函数”的实现原理及应用方法。 ### 一、函数概述 #### 1.1 函数定义 `FunctionTForm1.GetDistance(var lat1, lng1, lat2, lng2: Double): Double;` 此函数...

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 中文开发文档提供了一个详细的中文开发指南，涵盖了谷歌地图 Google Map API V3 的使用方法、相关类库、事件处理等方面的知识点。开发者可以根据自己的需求，选择合适的组件和方法来创建...

    谷歌地图GoogleMap

    一、Google Map API基础 Google Map API的使用首先需要在Google Cloud Platform上注册并获取API密钥，这个密钥用于验证应用程序的身份，防止滥用。API的调用通常包括JavaScript API、Static Maps API以及Directions...

    GoogleMap谷歌地图demo

    本文将深入探讨GoogleMap谷歌地图API的使用，以及如何通过它实现一个全面的地图工具。 首先，让我们从标题"GoogleMap谷歌地图demo"开始。这个标题暗示我们将会讨论一个基于GoogleMap API开发的示例应用。一个demo...

    googleMap根据经纬度获取地理位置

    首先，`googleMap根据经纬度获取地理位置`这个标题涉及到的核心技术是Google Maps Geocoding服务。Geocoding是将地址或坐标（经纬度）转换为地理坐标的过程，反之亦然。在Google Maps API中，我们可以使用Geocoding ...

    Ext Google Map 简易开发框架

    Ext Google Map简易开发框架是一种将流行的JavaScript库ExtJs与Google Maps API相结合的开发方式，用于构建功能丰富的地理信息系统。这个框架允许开发者轻松地在网页上展示地图，管理地图图层，控制图层的可见性，...

    map函数，Python

    接下来，我们使用`map()`函数将`doubler`函数应用于列表`numbers`中的每一个元素。`map()`函数返回一个迭代器`result`。由于`result`是一个迭代器，我们需要通过`list()`函数将其转换为列表以便查看结果。 #### 四...

    Google map 轨迹回放

    利用google map实现轨迹回放利用google map实现轨迹回放

    谷歌MAP_V3中文详解以及一个简单例子

    在JavaScript代码中，`initMap`函数内，通过`new google.maps.Map()`创建地图对象。需要指定一个DOM元素（如`div`）作为地图容器，以及地图的初始配置，如中心位置、缩放级别等。 例如： ```javascript function ...

    message-map.zip_messagemap函数

    标题中的"message-map.zip_messagemap函数"指的是这个压缩包可能包含有关如何理解和使用MFC中`message-map`函数的详细资料。`message-map`函数是MFC框架中处理消息映射的关键元素，它定义了类对各种消息的响应方式。...

    C++调用GOOGLEMAP代码

    标题 "C++调用GOOGLEMAP代码" 涉及到的是在C++程序中集成和使用Google Maps API的技术。Google Maps API是一个强大的工具，允许开发者在他们的应用程序中嵌入地图、路线规划、地理编码（地址转经纬度）等功能。在C++...

    vue2googlemap基于Vue2x和google地图组件

    下面将详细介绍Vue2googlemap的关键特性和使用方法。 1. **安装与配置** 安装Vue2googlemap通常通过npm进行，使用以下命令： ``` npm install vue2-google-map ``` 在项目中引入并注册该组件，确保已经获取到...

    C#编写的Google Map客户端的例子，对使用Google Map有很好的帮助

    很多人都知道Google Map，但是在使用时都需要在Web上使用，程序是使用C#开发的本地使用Google Map的客户端程序，同时具备数据库，Google Map显示的标记以及标记信息完全存放在本地数据库中，单击数据库中的信息，...

    googleMap_谷歌地图

    googleMap__谷歌___地图_.ppt

    从Keil的map file中快速找出内存地址对应的函数名

    简单实用的一个小工具： 从Keil的map file中快速找出内存地址对应的函数名，快速定位出问题的函数，加速debug的进程。

    python中map函数用法(1).docx

    理解并熟练使用`map`函数能帮助程序员更高效地编写代码，尤其在处理大量数据时。 ### 基本用法 `map`函数的基本语法是： ```python map(function, iterable, ...) ``` - `function`: 这是一个函数对象，可以是预...

    Google Map API 使用详解

    ### Google Map API 使用详解 #### 一、Google Map API 概览 Google Map API 是一套强大的工具集，允许开发者在其网站或应用中嵌入并定制谷歌地图。这不仅提升了用户体验，也为开发者提供了丰富的地理信息展示手段...

Magicbox
Global site tag (gtag.js) - Google Analytics