Google地图开发总结

原文网址：https://www.cnblogs.com/yincheng/p/google-map.html

 

googleMap本地化（离线）

 

 

Google Map Api 谷歌地图接口整理

 

Google Maps API V3 之 路线服务

 

googleMap中虚线的绘制方法

 

 

google map API V3控制地图缩放和显示范围

 

Google Maps API

 

腾讯位置服务API（marker 与google map API 通用，中文，写的较详细，可查看效果）

 

根据经纬度显示地图中位置

 

google地图API实现动画轨迹（二）

SVG 路径

 

google地图使用JS（较全的实例）

1、控制地图显示范围为中国

2、控制地图的缩放级别

3、异步加载谷歌API

4、等等等

 

SVG手册（带详细解释）

 

 

Google map 上做标记，并把标记连接起来  (解决普通marker偏移)

 

谷歌地图控制圆圈随缩放自适应大小 js

 

var circleOptions = {
strokeColor:"#95C7F9",
strokeOpacity:1,
strokeWeight:0.5,
fillColor:"#95C7F9",
fillOpacity:0.35,
map:map.map,
center:position
};
map.locateCircle = new google.maps.Circle(circleOptions);
google.maps.event.addListener(map.map, 'zoom_changed', function() {
var p = Math.pow(2, (21 - map.getZoom()));
map.locateCircle.setRadius(p * 1128.497220 * 0.0027);
});

 

 

 

谷歌地图 API 添加形状（事件样例）

 

Google Map 自定义infowindow样式

 

Google 地图 API 教程  http://www.runoob.com/googleapi/google-maps-overlays.html

 

 

如何删除google maps api v3离线地图的"google"和"使用条款"

 

google在control.js搜索google_white 将a=new QF(a,Fl("google_white "),new U(64,24))将其替换成a=new QF(a,Fl(""),new U(0,0)),即可消除。

使用条款在control.js文件里搜索  \\u4f7f\\u7528\\u6761\\u6b3e （使用条款的16进制编码，多出一个\,代表一个\\）可以使用http://www.msxindl.com/tools/unicode16.asp该网页进行翻译。

 

Google 地图 API V3 之控件

• 缩放控件，显示滑块（针对大地图）或“+/-”小按钮（针对小地图），用于控制地图的缩放等级。在非触摸的设备上，该控件默认显示在地图的左上角，而在触摸设备上则显示在左下角。
• 平移控件，显示用于平移地图的按钮。在非触摸的设备上，该控件默认显示在地图的左上角。您还可以使用平移控件对图像进行 45° 旋转（如果可用的话）。
• 比例控件，用于显示地图比例元素。默认情况下，系统不会启用此控件。
• MapType 控件，可让用户在不同的地图类型（例如 ROADMAP 和 SATELLITE）之间进行切换。该控件默认显示在地图的右上角。
• 街景视图控件包含一个街景小人图标，将该图标拖动到地图上即可启用街景视图。该控件默认显示在地图的左上角。
• 旋转控件包含一个较小的圆形图标，可让您旋转包含斜面图像的地图。该控件默认显示在地图的左上角。（有关详情，请参阅 45° 图像。）
• 总览图控件会显示一个简略的总览图，用于在更广阔区域内反映当前的地图视口。该控件默认以折叠状态显示在地图的右下角。

 

 

Google 地图 API V3 之事件(addDomListener)

 

 

 

（在程序中）如何抓取Google地图上地名的经纬度？

调用谷歌API，墙内的话用百度的geocode API吧。

地址：

addressAPI = "http://api.map.baidu.com/geocoder/v2/?address="+ address+"&output=json&ak=B9DG2Fxl5KjlUymnS1aapUWL&callback=showLocation"

成功：

 /*showLocatio&&showLocatio({"status":0,"result":{"location":{"lng":123.43279092160505,"lat":41.808644783515749},"precise":0,"confidence":10,"level":"城市"}})*/

失败：

/*showLocatio&&showLocatio({"status":1,"msg":"Internal Service Error:无相关结果","results":[]})*/

右键地图输出经纬度

            google.maps.event.addListener(map, "rightclick", function(event) {  

   var lat = event.latLng.lat();  

   var lng = event.latLng.lng();  

   // 经纬度  

   alert("Lat=" + lat + "; Lng=" + lng);  

}); 

 

地图上画五角星 

 

/*
//地图上画五角星
var map;
var markersArray = [];
function initialize() {
    var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
    var mapOptions = {
        zoom: 12,
        center: haightAshbury,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var goldStar = {
        path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
        fillColor: "green",
        fillOpacity: 0.8,
        scale: 1,
        strokeColor: "red",
        //
        strokeWeight: 1
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    google.maps.event.addListener(map, 'click',
    function(event) {
        marker = new google.maps.Marker({
            position: event.latLng,
            icon: goldStar,
            map: map
        });
        marker.setMap(map)
    });
}
*/