Google地图开发总结

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

 

googleMap本地化(离线)

 

 

Google Map Api 谷歌地图接口整理

 

Google Maps API V3 之 路线服务

 

googleMap中虚线的绘制方法

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

 

扫描二维码关注公众号,回复: 225952 查看本文章

Google Maps API

腾讯位置服务APImarker 与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);  
}); 
 
 
  1. /*  
  2. //地图上画五角星  
  3. var map;  
  4. var markersArray = [];  
  5. function initialize() {  
  6.     var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);  
  7.     var mapOptions = {  
  8.         zoom: 12,  
  9.         center: haightAshbury,  
  10.         mapTypeId: google.maps.MapTypeId.ROADMAP  
  11.     };  
  12.     var goldStar = {  
  13.         path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',  
  14.         fillColor: "green",  
  15.         fillOpacity: 0.8,  
  16.         scale: 1,  
  17.         strokeColor: "red",  
  18.         //  
  19.         strokeWeight: 1  
  20.     };  
  21.     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  22.     google.maps.event.addListener(map, 'click',  
  23.     function(event) {  
  24.         marker = new google.maps.Marker({  
  25.             position: event.latLng,  
  26.             icon: goldStar,  
  27.             map: map  
  28.         });  
  29.         marker.setMap(map)  
  30.     });  
  31. }  
  32. */  
  33.   

猜你喜欢

转载自it1990eye0920.iteye.com/blog/2405016