使用谷歌地图

使用谷歌地图实现在当前中绘制地图

1.谷歌地图的api

https://developers.google.cn/maps/(官方的)

2.实现流程

/**加载本地地图*/
function LocalMapType() {
}
LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalMapType.prototype.maxZoom = maxZoom; //地图的最大显示级别
LocalMapType.prototype.minZoom = minZoom; //地图的最小显示级别
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 strURL = outputPath; //本地地图切片存放路径
    strURL += zoom + "/" + coord.x + "/" + coord.y + format;
    img.src = strURL;
    return img;
};
var localMapType = new LocalMapType();

function initialize() {
    var mapOptions = {
        center : new google.maps.LatLng(39.9224760034337, 116.394653320313),        
         zoom : 11,
        streetViewControl : false,
        mapTypeControlOptions : {
            mapTypeIds : [
            'localMap' ]
        }
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.mapTypes.set('localMap', localMapType); //绑定本地地图类型
    map.setMapTypeId('localMap');
｝

如果直接用谷歌地图的话，如果网不好的话，就会造成地图根本显示不出来，所以我们现在需要将你需要的地图范围下载成一个一个的图片（也就是瓦片，这个可以使用太极地图）；

流程是：初始化地图，将需要显示的地图的范围和其他参数，放到new中；调用localMapType将当前需要的地图的范围内的图片获取到路径。

3.  之后我们可能会有一些其他的要求，比如说

（1）绘制图形

[1]：多边形 （下面这个例子是圆角矩形，但是就是看着想，如果放大的，还是可以看出来差异的）

var triangleCoords1 = [
			new google.maps.LatLng(minusXY(pointO.y, h), minusXY(pointO.x, 6*d)),//O y x
			new google.maps.LatLng(minusXY(pointO.y, h), plusXY(pointO.x, 6*d)),//B

			new google.maps.LatLng(minusXY(pointO.y, h+1000), plusXY(pointO.x, 6*d+2000)),//B
			new google.maps.LatLng(minusXY(pointO.y, h+2000), plusXY(pointO.x, 6*d+3500)),//B
			new google.maps.LatLng(minusXY(pointO.y, h+2600), plusXY(pointO.x, 6*d+4200)),//B
			new google.maps.LatLng(minusXY(pointO.y, h+3000), plusXY(pointO.x, 6*d+4000)),//B

			new google.maps.LatLng(minusXY(pointO.y, 2*h), plusXY(pointO.x, 7*d)),//B
			new google.maps.LatLng(minusXY(pointO.y, 4*h), plusXY(pointO.x, 7*d)),//B
			new google.maps.LatLng(minusXY(pointO.y, 4*h), minusXY(pointO.x, 7*d)),//B
			new google.maps.LatLng(minusXY(pointO.y, 2*h), minusXY(pointO.x, 7*d)),//B

			new google.maps.LatLng(minusXY(pointO.y, 2*h-2500), minusXY(pointO.x, 7*d-500)),//B
			new google.maps.LatLng(minusXY(pointO.y, 2*h-3500), minusXY(pointO.x, 7*d-700)),//B
			new google.maps.LatLng(minusXY(pointO.y, 2*h-4000), minusXY(pointO.x, 7*d-1000)),//B
			new google.maps.LatLng(minusXY(pointO.y, 2*h-4500), minusXY(pointO.x, 7*d-800)),//B

			new google.maps.LatLng(minusXY(pointO.y, h), minusXY(pointO.x, 6*d)),//O y x
		];//O
		bermudaTriangle1 = new google.maps.Polygon( {
			paths : triangleCoords1,
			strokeColor : '#fff',//'#FF0000',
			strokeOpacity : 0.8,
			strokeWeight : 0,
			fillColor : '#575757',
			fillOpacity : 0.35,
			map:map
		});

【2】圆形

var cityCircle1 = new google.maps.Circle({//椭圆
			strokeColor: '#FF0000',//'#FF0000',//'#FF0000',
			strokeOpacity: 0,
			strokeWeight: 2,
			fillColor: '#575757',
			fillOpacity: 0.35,
			map: map,
			center: new google.maps.LatLng(minusXY(pointO.y, h+h/2), minusXY(pointO.x, 5*d-d/2)),
			radius: Math.sqrt(
				(minusXY(pointO.x, 5*d)+minusXY(pointO.x, 4*d))*(minusXY(pointO.x, 5*d)+minusXY(pointO.x, 4*d))
				+
				(minusXY(pointO.y, 2*h)+minusXY(pointO.y, h))*(minusXY(pointO.y, 2*h)+minusXY(pointO.y, h))
			)
		  });
		  var cityCircle2= new google.maps.Circle({//椭圆
			strokeColor: '#FF0000',//'#FF0000',//'#FF0000',//'#cc0024'
			strokeOpacity: 0,
			strokeWeight: 2,
			fillColor: '#575757',
			fillOpacity: 0.1,
			map: map,
			center: new google.maps.LatLng(minusXY(pointO.y, 2*h-h/2), plusXY(pointO.x, 5*d-d/2)),
			radius: 100
		  });

【3】矩形

var rectangle = new google.maps.Rectangle( {
				strokeColor : '#FF0000',
				strokeOpacity : 0.8,
				strokeWeight : 0,
				fillColor : '#575757',
				fillOpacity : 0.35,
				map : map,
				bounds : new google.maps.LatLngBounds(new google.maps.LatLng(
						minusXY(pointO.y, h), minusXY(pointO.x, d * 6)),//C
						new google.maps.LatLng(minusXY(pointO.y, h * 3),
								plusXY(pointO.x, d * 6))//D
				)

			});
			
			recArr.push(rectangle)

（2）提示框

google.maps.event.addListener(marker1,'mouseover',function(MouseEvent) {
	infowindow.setContent("<div style='color:#02759C;padding:2px 2px;border-radius:10px;font-size:12px;overflow:hidden'>设备名称："
				+ tdata.children[j].devicename
				+ "<br/>"
				+ "设备厂商："
				+ tdata.children[j].vname
				+ "<br/>"
				+ "设备级别："
				+ tdata.children[j].levelname
				+ "</div><div style='height:15px'></div>");
　　infowindow.open(map, marker1);
})

google.maps.event.addListener(marker1, 'mouseout', function(MouseEvent) {
					infowindow.close();//←默认打开信息窗口。↓点击做伴弹出信息窗口
					$("#mytooltip").hide();
				});

　　

（3）鼠标可以拖动地图

google.maps.event.addListener(map, 'zoom_changed',function(){}）

4.注意点：

（1）在初始化的时候，如果遇到图片的路径不对，那很有可能是在new的时候范围的x y写错了，获取不到你需要的范围内的图片

（2）我们有时候在绘制图形的时候要求一些奇奇怪怪的图形，除了api里面规定的几种，其他的都可以用多边形绘制成功，比如圆角矩形