javascript 通过地址获取经纬度 get lat long from address

1. 地图版：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - demo</title><script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&sensor=true"></script><script type='text/javascript'>//<![CDATA[
$(window).load(function()
{$(function () {var lat = 44.88623409320778,lng = -87.86480712897173,latlng = new google.maps.LatLng(lat, lng),image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';//zoomControl: true,//zoomControlOptions: google.maps.ZoomControlStyle.LARGE,var mapOptions = {center: new google.maps.LatLng(lat, lng),zoom: 13,mapTypeId: google.maps.MapTypeId.ROADMAP,panControl: true,panControlOptions: {position: google.maps.ControlPosition.TOP_RIGHT},zoomControl: true,zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE,position: google.maps.ControlPosition.TOP_left}},map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),marker = new google.maps.Marker({position: latlng,map: map,icon: image});var input = document.getElementById('searchTextField');var autocomplete = new google.maps.places.Autocomplete(input, {types: ["geocode"]});autocomplete.bindTo('bounds', map);var infowindow = new google.maps.InfoWindow();google.maps.event.addListener(autocomplete, 'place_changed', function (event) {infowindow.close();var place = autocomplete.getPlace();if (place.geometry.viewport) {map.fitBounds(place.geometry.viewport);} else {map.setCenter(place.geometry.location);map.setZoom(17);}moveMarker(place.name, place.geometry.location);$('.MapLat').val(place.geometry.location.lat());$('.MapLon').val(place.geometry.location.lng());});google.maps.event.addListener(map, 'click', function (event) {$('.MapLat').val(event.latLng.lat());$('.MapLon').val(event.latLng.lng());infowindow.close();var geocoder = new google.maps.Geocoder();geocoder.geocode({"latLng":event.latLng}, function (results, status) {console.log(results, status);if (status == google.maps.GeocoderStatus.OK) {console.log(results);var lat = results[0].geometry.location.lat(),lng = results[0].geometry.location.lng(),placeName = results[0].address_components[0].long_name,latlng = new google.maps.LatLng(lat, lng);moveMarker(placeName, latlng);$("#searchTextField").val(results[0].formatted_address);}});});function moveMarker(placeName, latlng) {marker.setIcon(image);marker.setPosition(latlng);infowindow.setContent(placeName);//infowindow.open(map, marker);}});
});</script></head>
<body>Address:
<input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;">
<br>latitude:<input name="latitude" class="MapLat" value="" type="text" placeholder="Latitude" style="width: 161px;" disabled>longitude:<input name="longitude" class="MapLon" value="" type="text" placeholder="Longitude" style="width: 161px;" disabled><div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div></body>
</html>

参考：http://stackoverflow.com/a/14051235/4484798

2. 简约版

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><textarea id="txtAddress" rows="3" cols="25"></textarea><br /><input type="button" οnclick="GetLocation()" value="Get Location" /><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript"><!--function GetLocation() {var geocoder = new google.maps.Geocoder();var address = document.getElementById("txtAddress").value;geocoder.geocode({ 'address': address }, function (results, status) {if (status == google.maps.GeocoderStatus.OK) {var latitude = results[0].geometry.location.lat();var longitude = results[0].geometry.location.lng();alert("Latitude: " + latitude + "\nLongitude: " + longitude);} else {alert("Request failed.")}});};//--></script>
</body>
</html>

参考：http://www.aspsnippets.com/Red/Articles/Google-Maps-API-V3-Get-Latitude-and-Longitude-of-a-location-from-Address-using-JavaScript.aspx

2.1 通过经纬度获取地址

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body>Latitude:<input type="text" id="txtLatitude" value="18.92488028662047" />Latitude:<input type="text" id="txtLongitude" value="72.8232192993164" /><input type="button" value="Get Address" οnclick="GetAddress()" /><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">function GetAddress() {var lat = parseFloat(document.getElementById("txtLatitude").value);var lng = parseFloat(document.getElementById("txtLongitude").value);var latlng = new google.maps.LatLng(lat, lng);var geocoder = geocoder = new google.maps.Geocoder();geocoder.geocode({ 'latLng': latlng }, function (results, status) {if (status == google.maps.GeocoderStatus.OK) {if (results[1]) {alert("Location: " + results[1].formatted_address);}}});}</script>
</body>
</html>

参考：http://www.aspsnippets.com/Articles/Reverse-Geocoding-Get-address-from-Latitude-and-Longitude-using-Google-Maps-Geocoding-API.aspx

3. 或者直接使用 https://maps.googleapis.com/maps/api/geocode/json?address=changzhi

参考 https://developers.google.com/maps/documentation/geocoding/#ReverseGeocoding

demo：http://sources.ikeepstudying.com/google-distance/latng.php

原文：javascript 通过地址获取经纬度 get lat long from address

javascript 通过地址获取经纬度 get lat long from address相关推荐

linux脚本获取经纬度,JS实现根据详细地址获取经纬度功能示例
本文实例讲述了JS实现根据详细地址获取经纬度功能.分享给大家供大家参考,具体如下: 这个功能还是比较实用的,记录分享一下: 根据地址查询经纬度要查询的地址: 查询结果(经纬度): var map = ...
vue 高德地图API根据地址获取经纬度/根据经纬度获取地址
1.引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&am ...
高德地图根据地址获取经纬度(JS)
高德地图根据地址获取经纬度(JS) <script type="text/javascript" src="https://webapi.amap.com/maps ...
python根据地址获取经纬度，通过经纬度获取地址并反写入excel
import time import requests import pandas as pd from pandas import DataFrame import xlrddeveloper_ke ...
前端web用腾讯地图api根据地址获取经纬度
需求:使用腾讯地图,通过输入的地址获取经纬度 1.先引入腾讯地图,参考https://blog.csdn.net/l13620804253/article/details/117254651 2.要调 ...
Java调用高德地图API根据详细地址获取经纬度
Java调用高德地图API根据详细地址获取经纬度官方API:https://lbs.amap.com/api/webservice/guide/api/georegeo * Web服务API 地理/ ...
php调用百度接口获取经纬度,利用百度API(js)，通过地址获取经纬度的注意事项...
网上给的很多答案都是这种: http://api.map.baidu.com/geocoder?address=地址&output=输出格式类型&key=用户密钥&city=城 ...
腾讯地图api如何根据地址获取经纬度
腾讯地图api如何根据地址获取经纬度 /** * 根据地址得到经纬度 //GET请求 */ @GetMapping("tencentGetLatLngBy/{a ...
php根据地址获取经纬度
使用得是高德开放平台,网址为:https://lbs.amap.com/ 第一步,申请"Web服务API"密钥(Key): 第二步,拼接HTTP请求URL,第一步申请的Key需作为 ...

javascript 通过地址获取经纬度 get lat long from address

javascript 通过地址获取经纬度 get lat long from address相关推荐

最新文章

热门文章