google 地图基础函数使用备忘 _Web前端

google map 基础函数使用备忘
<!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 地图 基础函数使用备忘

google 地图基础函数使用备忘