www.javainfo.com.cn 上干货 欢迎收藏

这是一个小例子，基于腾讯地图实现

系统运行效果图：

分2步：

1 编写嵌入页面代码

       JS引入

      <title>浏览器定位</title>

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.5&key=971d48b80c9dc3893b744e334f42ee26">        </script>

     初始化代码（包含自动定位当前位置功能）：     

<div id='container'></div>

<script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key=971d48b80c9dc3893b744e334f42ee26&plugin=AMap.ToolBar'></script>

<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>

<script type="text/javascript">

AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {

var map, geolocation;

var map = new AMap.Map('container', {

zoom: 14,

scrollWheel: false

});

/* AMap.plugin('AMap.ToolBar',function(){

    var toolbar = new AMap.ToolBar();

    map.addControl(toolbar)

})*/

AMap.plugin('AMap.Geolocation', function() {

geolocation = new AMap.Geolocation({

enableHighAccuracy: true, //是否使用高精度定位，默认:true

timeout: 10000, //超过10秒后停止定位，默认：无穷大

maximumAge: 0, //定位结果缓存0毫秒，默认：0

convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true

showButton: true, //显示定位按钮，默认：true

buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角

buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)

showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true

showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true

panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true

zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

});

map.addControl(geolocation);

geolocation.getCurrentPosition();

//AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息

// AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息

});

var positionPicker = new PositionPicker({

mode: 'dragMap',

map: map

});

positionPicker.on('success', function(positionResult) {

// 获取经纬度和地址传递给父级页面

parent.document.getElementById('coordinate').value = positionResult.position.lng + ',' + positionResult.position.lat;

parent.document.getElementById('address').value = positionResult.regeocode.addressComponent.province + positionResult.regeocode.addressComponent.city + positionResult.regeocode.addressComponent.district + positionResult.regeocode.addressComponent.street + positionResult.regeocode.addressComponent.township + positionResult.regeocode.addressComponent.streetNumber;

// document.getElementById('address').value = positionResult.regeocode.addressComponent.adcode;

var str = ['定位成功'];

str.push('地址：' + positionResult.regeocode.addressComponent.province + positionResult.regeocode.addressComponent.city + positionResult.regeocode.addressComponent.district + positionResult.regeocode.addressComponent.street + positionResult.regeocode.addressComponent.township + positionResult.regeocode.addressComponent.streetNumber);

str.push('经度：' + positionResult.position.lng);

str.push('纬度：' + positionResult.position.lat);

str.push('邮编：' + positionResult.regeocode.addressComponent.adcode);

// str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));

// document.getElementById('tip').innerHTML = str.join('<br>');

/*document.getElementById('lnglat').innerHTML = positionResult.position;

document.getElementById('address').innerHTML = positionResult.address;

document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;

document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;

document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;*/

});

positionPicker.on('fail', function(positionResult) {

document.getElementById('userlocaltionid').value = ' ';

document.getElementById('userlocaltiontext').value = ' ';

document.getElementById('addresscode').value = ' ';

document.getElementById('tip').innerHTML = ' ';

});

var onModeChange = function(e) {

positionPicker.setMode(e.target.value)

}

/*var startButton = document.getElementById('start');

var stopButton = document.getElementById('stop');

var dragMapMode = document.getElementsByName('mode')[0];

var dragMarkerMode = document.getElementsByName('mode')[1];

AMap.event.addDomListener(startButton, 'click', function() {

   positionPicker.start(map.getBounds().getSouthWest())

})

AMap.event.addDomListener(stopButton, 'click', function() {

   positionPicker.stop();

})

AMap.event.addDomListener(dragMapMode, 'change', onModeChange)

AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);*/

positionPicker.start();

map.panBy(0, 1);

map.addControl(new AMap.ToolBar({

liteStyle: true

}))

});

</script>

第二步：编写主界面 通过iframe 嵌入地图页面代码

   

<div class="mui-input-row">

<label for="coordinate">*定位：</label>

<input type="text" id="coordinate" disabled="disabled" value="自动获取经纬度..." />

</div>

<iframe name="map" id="map" src="<%=basePath%>/phoneliulanqi_dingwei/map.html" frameborder="0" width="100%" height="200px"></iframe>

<div class="mui-textarea-row">

   <label for="address">*联系地址：</label>

   <textarea rows="3" cols="20" type="text" id="address" placeholder="自动获取地址..."></textarea>

</div>

      

如有疑问 请留言 欢迎提供建议