Summary of Google Maps Development

Original URL: https://www.cnblogs.com/yincheng/p/google-map.html

 

googleMap localization (offline)

 

 

Google Map Api Google Map interface finishing

 

Google Maps API V3 Route Service

 

Drawing method of dotted line in googleMap

 

 

Google map API V3 controls map zoom and display range

 

Google Maps API

 

Tencent Location Services API ( marker  and google map API are common, Chinese, written in more detail, you can view the effect)

 

Display location on map based on latitude and longitude

 

Google Maps API to achieve animation track (2)

SVG path

 

Google Maps uses JS (more complete examples)

1. The display range of the control map is China

2. Control the zoom level of the map

3. Load Google API asynchronously

4. Wait and so on

 

SVG Manual (with detailed explanation)

 

 

Mark on Google map and connect the markers  (solve common marker offset)

 

Google Maps control circle with zoom adaptive size 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.   

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326208005&siteId=291194637