使用谷歌地圖

使用谷歌地圖實如今當前中繪製地圖

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裏面規定的幾種，其餘的均可以用多邊形繪製成功，好比圓角矩形