高德地圖 定位 搜尋
<body>
<input type="text" id="mymap_search">
<button class="search">search</button>
<input type="text" name="lon">
<input type="text" name="lat">
<input type="text" name="resourceAddress">
<input type="text" id="result" placeholder="id">
<div id="container"></div>
</body>
-----------------------------------------------*
<script src="jq.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=key值"></script>
var map, addMarker;
var geocoder;
var placeSearch;
$(function() {
// 加入高的地圖
map = new AMap.Map('container', {
resizeEnable: true
});
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'],
function() {
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
});
AMap.service('AMap.Geocoder', function() { //回撥函式
//例項化Geocoder
geocoder = new AMap.Geocoder({
city: "全國" //城市，預設：“全國”
});
});
// 載入搜尋列表
myMapViewLocation();
AMap.service(["AMap.PlaceSearch", 'AMap.Geolocation'], function() {
placeSearch = new AMap.PlaceSearch({ //構造地點查詢類
pageSize: 5,
pageIndex: 1,
city: "全國", //城市
map: map,
panel: "result"
});
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，預設:true
timeout: 10000, //超過10秒後停止定位，預設：無窮大
buttonOffset: new AMap.Pixel(10, 20), //定位按鈕與設定的停靠位置的偏移量，預設：Pixel(10, 20)
zoomToAccuracy: true, //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，預設：false
buttonPosition: 'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位資訊
AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯資訊
});
//為地圖註冊click事件獲取滑鼠點擊出的經緯度座標
var clickEventListener = map.on('click', function(e) {
console.log(e.lnglat.lng, e.lnglat.lat)
$("input[name=lon]").val(e.lnglat.lng);
$("input[name=lat]").val(e.lnglat.lat);
// 填寫地址
writeAddress([e.lnglat.lng, e.lnglat.lat]);
});
placeSearch.search("深圳");
$('.search').click(function() {
mapsearch();
});
placeSearch.on('complete', function(res) {
var location = res.poiList.pois[0].location;
var poil = res.poiList.pois[0];
// console.log(poil.cityname, poil.adname, poil.address);
var lat = location.lat;
var lng = location.lng; // 經度
console.log(lat, lng);
});
});
//地圖搜尋
function mapsearch() {
var searchVal = $("#mymap_search").val();
console.log(searchVal);
placeSearch.search(searchVal);
}
// 回顯
function myMapViewLocation() {
//console.log("回顯座標");
var mlon = $("input[name=lon]").val();
var mlat = $("input[name=lat]").val();
var lnglatXY = [mlon, mlat];
if (mlon && mlat) {
addMarker(lnglatXY);
}
}
// 例項化點標記
function addMarker(lnglatXY) {
//console.log(lnglatXY);
marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: lnglatXY
});
marker.setMap(map);
map.setFitView(); // 執行定位
};
// 填寫地址
function writeAddress(lnglatXY) {
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
geocoder_CallBack(result);
}
});
};
// 地址回撥
function geocoder_CallBack(data) {
var address = data.regeocode.formattedAddress; //返回地址描述
$("input[name=resourceAddress]").val(address);
};