谷歌地图坐标拾取器
什么是坐标拾取器?
类似腾讯地图这个:https://lbs.qq.com/tool/getpoint/index.html,基本上用做地图打点功能,取经纬度入库等等操作
为什么还要做谷歌地图坐标拾取器?
国内的三大地图厂家没有海外坐标拾取功能,即使你开通了海外位置服务(开通需公司名义申请)。
需要的条件?
以下谷歌 api 申请需要全部申请下来才可正常使用
api 申请地址:https://console.cloud.google.com/google/maps-apis/api-list
下面直接上代码:
[hide_cv]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>谷歌地图坐标拾取器演示</title> </head> <style> .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 280px; margin-top: 16px; height: 30px; } #pac-input:focus { border-color: #4d90fe; } .pac-container { font-family: Roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; } #target { width: 345px; } .line { display: flex; justify-content: flex-start; align-items: center; } .inputCnt { width: 200px; height: 30px; margin: 0 10px; } .btn1 { height: 36px; } .inputCnt2 { width: 100px; height: 30px; margin: 0 10px; } .r-inputs {} .r-inputs input { height: 30px; padding-left: 8px; } .r-inputs>div { display: flex; align-items: baseline; } .r-inputs>div input { margin: 0 10px 10px 0; } .r-inputs input.r-address { margin-bottom: 10px; width: 400px; } </style> <body> <div> <div> 经度:<input type="" name="" id="address_lng" value="经度" /> 纬度:<input type="" name="" id="address_lat" value="纬度" /> </div> 地址:<input type="" name="" id="address" value="address" /> </div> <input id="pac-input" type="text" placeholder="Search Box"> <div id="map" style="width:800px; height:750px"></div> <script src="https://maps.googleapis.com/maps/api/js?key=你的申请的 key&libraries=places&callback=initAutocomplete" async defer></script> </body> </html> <script> var lngtxt = "101.686855"; var lattxt = "3.139003"; var addresstxt = "吉隆坡"; var map; var marker; var infowindow; var geocoder; var markersArray = []; function initAutocomplete() { var latlng = new google.maps.LatLng(lattxt, lngtxt); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), myOptions); geocoder = new google.maps.Geocoder(); //实例化地址解析 //监听点击地图事件 google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); // Create the search box and link it to the UI element. var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Bias the SearchBox results towards current map's viewport. map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); var markers = []; // Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener('places_changed', function() { var places = searchBox.getPlaces(); if(places.length == 0) { return; } // Clear out the old markers. markers.forEach(function(marker) { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. var bounds = new google.maps.LatLngBounds(); places.forEach(function(place) { if(!place.geometry) { console.log("Returned place contains no geometry"); return; } var icon = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; //console.log(place.geometry.location.lat()); mapClick(place.geometry.location.lng(), place.geometry.location.lat(), place.name); // Create a marker for each place. markers.push(new google.maps.Marker({ map: map, icon: icon, title: place.name, position: place.geometry.location })); if(place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); } function placeMarker(location) { clearOverlays(infowindow); //清除地图中的标记 marker = new google.maps.Marker({ position: location, map: map }); markersArray.push(marker); //根据经纬度获取地址 if(geocoder) { geocoder.geocode({ 'location': location }, function(results, status) { if(status == google.maps.GeocoderStatus.OK) { if(results[0]) { attachSecretMessage(marker, results[0].geometry.location, results[0].formatted_address); } } else { alert("Geocoder failed due to: " + status); } }); } } //在地图上显示经纬度地址 function attachSecretMessage(marker, piont, address) { var message = "<b>坐标:</b>" + piont.lat() + " , " + piont.lng() + "<br />" + "<b>地址:</b>" + address; var infowindow = new google.maps.InfoWindow({ content: message, size: new google.maps.Size(50, 50) }); infowindow.open(map, marker); if(typeof(mapClick) == "function") mapClick(piont.lng(), piont.lat(), address); } //删除所有标记阵列中消除对它们的引用 function clearOverlays(infowindow) { if(markersArray && markersArray.length > 0) { for(var i = 0; i < markersArray.length; i++) { markersArray[i].setMap(null); } markersArray.length = 0; } if(infowindow) { infowindow.close(); } } function setiInit() { // 页面加载显示默认lng lat address---begin if(lattxt != '' && lngtxt != '' && addresstxt != '') { var latlng = new google.maps.LatLng(lattxt, lngtxt); marker = new google.maps.Marker({ position: latlng, map: map }); markersArray.push(marker); attachSecretMessage(marker, latlng, addresstxt); } } function mapClick(lng, lat, address) { window.parent.document.getElementById("address_lng").value = lng; window.parent.document.getElementById("address_lat").value = lat; window.parent.document.getElementById("address").value = address; } window.onload = function() { setiInit(); } </script>
[/hide_cv]
此时页面就可以加载谷歌地图坐标拾取器了
在实际应用过程中需要注意的是,谷歌地图是使用WGS-84坐标系,而国内是用的 GCJ-02 坐标系,一般转换有对应的国内地图 api 提供。
评论
溜达
回复溜达
溜达
回复溜达
打打酱油
回复参考参考
估
回复谢谢大佬
估
回复谢
雪
回复感谢
雪
回复xiexie
雪
回复感谢
test
回复看看
test
回复感谢分享
369692194@qq.com
回复感谢分享
djbgg
回复感谢分享
123
回复感谢
123
回复奈斯
123
回复23
123
回复感谢楼主
111
回复666
源
回复漂亮
123
回复漂亮呀
123
回复pl
zhch
回复赞
四色欧石楠
回复感谢
小王
回复感谢楼主
cuishaojie
回复快让看看
justu
回复感谢楼主
adrian
回复感谢楼主
adrian
回复nice
奥术大师多
回复感谢楼主
winter_again
回复感谢楼主
Gw.孟
回复挺好