谷歌地图坐标拾取器

流氓凡资源分享 2020-05-07 1.17 W 48

什么是坐标拾取器？

类似腾讯地图这个：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 提供。