GoogleMap v3 API详解，该怎么解决
展开全部
我曾经用这个做过google离线地图的展示和渲染，下面是相关代码：
加载本地地图的函数：
function LocalMapType() {}
LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalMapType.prototype.maxZoom = 13; // 地图显示最大级别
LocalMapType.prototype.minZoom = 9; // 地图显示最小级别
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 = "gmap/tiles/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
img.src = strURL;
return img;
};
var localMapType = new LocalMapType();
初始化地图函数：
function initialize() {
// 以该经纬度为中心居中显示，注意google 一般先写纬度，在写经度
var myLatlng = new google.maps.LatLng(30.51667,114.31667);
var myOptions = {
center: myLatlng,
zoom: 10, // 初始化地图默认级别
streetViewControl: false, // 默认不显示全景图
mapTypeControlOptions: {
mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP] // 地图类型为普通街道地图
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
map.mapTypes.set('local', localMapType);
map.setMapTypeId('local');
// 设置地图瓦片大小为256*256
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
html代码：
<body onload="initialize()">
<div id="map_canvas" style="width: 80%; height: 630px;"></div>
</body>
在离线的情况下渲染离线地图：
1.加载图片：
var image = 'icon/0.png'; // 存放图片的路径
var myLatLng = new google.maps.LatLng(30.51667,114.31667); // 图片显示的地方
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
2.画折线：
var flightPlanCoordinates = [
new google.maps.LatLng(30.51667,114.31667),
new google.maps.LatLng(30.50667,114.32667),
new google.maps.LatLng(30.40667,114.30667)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map); // 如果想还原去掉折线用：flightMap.setMap(null)
3.画圆：
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(31.18439, 121.49454),
population: 284259
};
citymap['newyork'] = {
center: new google.maps.LatLng(31.38439, 121.52454),
population: 814319
};
var cityCircle;
for (var city in citymap) {
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: citymap[city].population / 1000
};
cityCircle = new google.maps.Circle(populationOptions);
}
4.画多边形：
// 如果是多边形，最后一个点不需要写成第一个点就可以自动连起来
var triangleCoords = [
new google.maps.LatLng(30.51667,114.31667),
new google.maps.LatLng(30.50667,114.42667),
new google.maps.LatLng(30.40667,114.30667)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
希望对你有用。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
