使用高德/腾讯地图api写的小例子-地址和经纬转换

最新推荐文章于 2024-05-30 10:42:31 发布

dou1246

最新推荐文章于 2024-05-30 10:42:31 发布

阅读量634

点赞数

本文链接：https://blog.csdn.net/qq_39240512/article/details/96303896

版权

基本功能

1.正确格式输入地址，点击地址转换
2.点击地图，显示地址

代码

	<!doctype html>
<html >
<head>
	<meta charset="UTF-8">
	<title>地图api使用</title>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你自己的ak&plugin=AMap.Geocoder"></script> 
	 <style>
         #container {width:800px; height: 600px; }  
	 </style>	
</head>
<body>

	 <table class="formTable">
                <tbody>
	            <tr>
                    <td><span class="inputmust">*</span><label for="address">地址</label></td>
                    <td><input type="text" id="address" name="address"
                               autocomplete="off" style="width:400px"><span class="addressBtn">地址转标点</span></td>
                </tr>
                <tr>
                    <td><span class="inputmust">*</span><label for="longitude">经度</label></td>
                    <td><input type="text" id="longitude" name="longitude" autocomplete="off"></td>
                </tr>
                <tr>
                    <td><span class="inputmust">*</span><label for="latitude">纬度</label></td>
                    <td><input type="text" id="latitude" name="latitude" autocomplete="off"></td>
                </tr>
                </tbody>
     </table>
     
     <div id="container"></div>
    
     <script type="text/javascript">
	    var map,marker,geocoder;
	    var markers = [];
	    
	    $(function(){
		    
		    map = new AMap.Map('container', {
			    zoom:11,//级别
		    });
	
		    AMap.service('AMap.Geocoder',function(){//回调函数
			    //实例化Geocoder
			    geocoder = new AMap.Geocoder({
			        city: "全国"//城市，默认：“全国”
			    });
		    	//TODO: 使用geocoder 对象完成相关功能
		    });
		    
		    map.on("click", function (e) {
		        var lng = e.lnglat.lng;
		        var lat = e.lnglat.lat;
		        $("#longitude").val(lng);
		        $("#latitude").val(lat);
		        //经纬度（点） 转 地址
		        writeAddress(lng,lat);
		        //显示点标记
		        myMapViewLocation();
		   	});
	
		    //地址 转 经纬度	
		    $(".addressBtn").click(function () {
		        var address = $("#address").val();
		        // console.log(address);
		        // 将地址解析结果显示在地图上,并调整地图视野
			    geocoder.getLocation(address, function(status, result) {
			        if (status === 'complete' && result.geocodes.length ) {
			            // console.log(status);
			            var lnglat = result.geocodes[0].location
		                $("#longitude").val(lnglat.lng);
		                $("#latitude").val(lnglat.lat);
					    //显示点标记
					    myMapViewLocation();
					    // 执行定位
					    map.setFitView();
			        }else{
		                alert("根据地址查询位置失败");
		            }
			    }); 
		    });
	    });
	
		// 经纬度 转 地址
	    // 提交经纬度	
		function writeAddress(lng,lat){
			var lnglatXY = [lng,lat];
		    geocoder.getAddress(lnglatXY, function(status, result) {
		        if (status === 'complete' && result.info === 'OK') {
		            // console.log(status);
		            geocoder_CallBack(result); 
		        }
		    }); 
		}
		// 地址回调
		function geocoder_CallBack(data) {
		    var address = data.regeocode.formattedAddress; //返回地址描述
		    // console.log(address);
		    $("#address").val(address);
		}
	
	    // 获取经纬度，显示点标记
		function myMapViewLocation(){
		    //console.log("回显坐标");
		    var mlon = $("#longitude").val();
		    var mlat = $("#latitude").val();
		    var lnglatXY = [mlon,mlat];
		    if(mlon&&mlat){
		        addMarker(lnglatXY);
		    }
		}
		// 实例化点标记
		function addMarker(lnglatXY) {
		    //console.log(lnglatXY);
		    marker = new AMap.Marker({
		        icon: new AMap.Icon(
			        	{
			        	image:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
			        	imageSize:new AMap.Size(25 , 36)
			        	}
		        	),
		        position: lnglatXY
		    });
		    marker.setMap(map);
		    //加入数组
		    markers.push(marker);
		    // console.log(markers.length);
		    if (markers.length>1) {
		    	//之前的点标记不再标记地图
		    	markers[0].setMap(null);
		    	//并从数组中移除（只剩当前点标记）
		    	markers.splice(0,1);
		    };
		}
     </script>
	
</body>
</html>

更新：使用高德API查询地址，使用腾讯API查询经纬度
（两个地图都是使用火星坐标所以可以直接传参）
原因：高德根据经纬度查地址更准确、更有意义——能够显示到具体的名字
腾讯根据地址查到的经纬度在地图上的标记更准确，误差小

<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=腾讯地图js接口的key"></script>
<script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

var map,marker,geocoder,citylocation;
var markers = [];

$(function(){

    map = new qq.maps.Map(document.getElementById('container'),{
        center: new qq.maps.LatLng(29.79317,119.6915),
        draggableCursor:"pointer",
        draggingCursor: "pointer",
        zoom: 13
    });

    citylocation = new qq.maps.CityService({
        //设置地图
        map : map,

        complete : function(results){
            map.setCenter(results.detail.latLng);
        }
    });

    citylocation.searchCityByIP(returnCitySN["cip"]);

    geocoder = new qq.maps.Geocoder({
        error : function(){
            alert("查询位置失败");
        }
    });

    //地址 转 经纬度
    $(".addressBtn").click(function () {
        var address = $("#address").val();
        // console.log(address);
        // 将地址解析结果显示在地图上,并调整地图视野
        geocoder.setComplete(
            function(result){
//                        console.log(result);
                map.setCenter(result.detail.location);
                marker = new qq.maps.Marker({
                    map:map,
                    position: result.detail.location
                });

                //加入数组
                markers.push(marker);
                // console.log(markers.length);
                if (markers.length>1) {
                    //之前的点标记不再标记地图
                    markers[0].setMap(null);
                    //并从数组中移除（只剩当前点标记）
                    markers.splice(0,1);
                };
                $("#longitude").val(result.detail.location.getLng());
                $("#latitude").val(result.detail.location.getLat());
            }
        );
        geocoder.getLocation(address);
    });

    qq.maps.event.addListener(
        map,
        'click',
        function(event) {
//                    console.log('您点击的位置为:[' + event.latLng.getLng() +
//                        ',' + event.latLng.getLat() + ']');
            $("#longitude").val(event.latLng.getLng().toFixed(6));
            $("#latitude").val(event.latLng.getLat().toFixed(6));
            //经纬度（点） 转 地址
            writeAddress(event.latLng.getLng(),event.latLng.getLat());
        }
    );


});

// 经纬度 转 地址
// 提交经纬度
function writeAddress(lng,lat){

    $.ajax({
        type: "GET",
        url: "https://restapi.amap.com/v3/geocode/regeo",
        data: {
            location:lng+","+lat,
            output:"JSON",
            key:"你的高德WEB服务的KEY"
        },
        dataType: "json",
        success: function (data) {

            $("#address").val(data.regeocode.formatted_address);
            marker = new qq.maps.Marker({
                map:map,
                position: new qq.maps.LatLng(lat,lng)
            });

            //加入数组
            markers.push(marker);
            // console.log(markers.length);
            if (markers.length>1) {
                //之前的点标记不再标记地图
                markers[0].setMap(null);
                //并从数组中移除（只剩当前点标记）
                markers.splice(0,1);
            };

        }
    });
}

dou1246

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用高德/腾讯地图api写的小例子-地址和经纬转换

基本功能1.正确格式输入地址，点击地址转换2.点击地图，显示地址代码 <!doctype html><html ><head> <meta charset="UTF-8"> <title>地图api使用</title> <script src="js/jquery.min.js" type="text/...
复制链接

扫一扫