GoogleMap v3 API详解，该怎么解决

 我来答

1个回答

#合辑# 面试问优缺点怎么回答最加分？

简单单词
2016-04-02 · 超过34用户采纳过TA的回答

知道答主

回答量：58

采纳率：0%

帮助的人：27.2万

我也去答题访问个人页

关注

展开全部

我曾经用这个做过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);

希望对你有用。

本回答被提问者采纳