使用谷歌地图
使用谷歌地图实现在当前中绘制地图
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里面规定的几种，其他的都可以用多边形绘制成功，比如圆角矩形
