1.代码 自己申请高德地图 securityJsCode和Key进行替换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>111</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<div class="parnet">
<!-- <div class="info">
<p id='result'></p>
</div> -->
<div class="inputp">
<input id="tipinput" class="mui-input-clear" placeholder="请输入" />
</div>
<div>
<div id='container'></div>
<img class="cover_marker" src="images/position.png" />
</div>
<div id="panel"></div>
<div class="main_bottom" ref="mapBottom">
<div class="choose_address">
<!-- 搜索出来的地址 -->
<text id="address" class="add_text">地址</text>
</div>
<button type="button" class="mui-btn mui-btn-warning ">选择这里</button>
</div>
</div>
</body>
<style>
#container {
width: 100%;
height: 300px;
}
.parnet{
flex:1 ;
}
/* 中心点 */
.cover_marker {
position: absolute;
width: 30px;
height: 25px;
top: 168px;
left: 46%;
}
#tipinput {
width: 100%;
padding: 5px;
}
.inputp {
padding: 5px;
background-color: orange;
height: 45px;
}
.info {
width: 100%;
}
/* 底部下单 */
.main_bottom {
bottom: 0px;
left: 0px;
right: 0px;
background-color: #FFFFFF;
height: 100px;
width: 100%;
}
.choose_address {
margin: 5px 10px 5px 10px;
border-style: solid;
border-width: 1px;
border-color: #ff0000;
border-radius: 5px;
background-color: #F98F34;
}
.add_text {
padding: 10px;
height: 35px;
font-size: 20px;
line-height: 35px;
}
.mui-btn {
width: 50%;
margin: 5px;
}
#panel {
background-color: white;
overflow-y: auto;
top: 10px;
right: 10px;
width: 100%;
flex: 1;
border-bottom: solid 1px silver;
}
</style>
<!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '高德地图',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=高德地图key&plugin=AMap.Geocoder,AMap.AutoComplete,AMap.PlaceSearch,AMap.Geolocation,AMap.Scale">
</script>
<script type="text/javascript">
var selectTitle;
var selectAddress;
// 获取地图中心点
//var currentCenter = map.getCenter(); dragend
var map = new AMap.Map('container', {
viewMode: '2D',
resizeEnable: true,
zoom:20
});
var scale = new AMap.Scale();
//定位
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position: 'RB', //定位按钮的停靠位置
offset: new AMap.Pixel(10, 0), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
needAddress: true // 定位后 显示定位点的地址 方便获取到城市信息
//extensions :'all'
});
map.addControl(geolocation);
map.addControl(scale);
geolocation.getCurrentPosition(function(status, result) {
if (status == 'complete') {
onComplete(result)
} else {
onError(result)
}
});
var city;
var cityStr;
var adCode;
//解析定位结果
function onComplete(data) {
console.log(data)
city = data.addressComponent.citycode
console.log("addressComponent = " + data.addressComponent.city)
console.log("adcode = " + data.addressComponent.adcode)
cityStr = data.addressComponent.city;
console.log("citycode = " + city)
console.log(data.position.lat + "-- " + data.position.lng);
var str = [];
str.push('定位结果：' + data.position);
str.push('城市：' + data.addressComponent.city);
str.push('pois：' + data.pois);
str.push('定位类别：' + data.location_type);
if (data.accuracy) {
str.push('精度：' + data.accuracy + ' 米');
} //如为IP精确定位结果则没有精度信息
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
// document.getElementById('result').innerHTML = str /* .join('<br>') */ ;
document.getElementById('tipinput').value = cityStr;
console.log(str);
console.log(data);
searchPoi([data.position.lng, data.position.lat])
searchPoint([data.position.lng, data.position.lat])
}
//解析定位错误信息
function onError(data) {
document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
}
// -----------------定位完成
var placeSearch = new AMap.PlaceSearch({
type: '', // 兴趣点类别
pageSize: 5, // 单页显示结果条数
pageIndex: 1, // 页码
city: city, // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, // 展现结果的地图实例
panel: "panel", // 结果列表将在此容器中进行展示。
autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
// 输入提示
var autoOptions = {
city: adCode,
input: "tipinput",
citylimit: true
};
var auto = new AMap.AutoComplete(autoOptions);
auto.on("select", select); //注册监听，当选中某条记录时会触发
auto.setCity(adCode)
function select(e) {
placeSearch.setCity(e.poi.adcode);
//placeSearch.search(e.poi.name); //关键字查询查询
map.setCenter(e.poi.location);
searchPoi(e.poi.location, e.poi.name)
console.log(e);
}
var geocoder = new AMap.Geocoder({
city: city, //城市设为北京，默认：“全国”
});
// 地图移动时间 获取到中心点坐标
map.on('touchend', function(ev) {
// 触发事件的对象
var target = ev.target;
// 触发事件的地理坐标，AMap.LngLat 类型
// var lnglat = ev.lnglat;
// // 触发事件的像素坐标，AMap.Pixel 类型
// var pixel = ev.pixel;
// 触发事件类型
var type = ev.type;
console.log(type);
var currentCenter = map.getCenter();
console.log("touchend = " + currentCenter.lng + "-- lat = " + currentCenter.lat);
//map.panTo([currentCenter.lng, currentCenter.lat]);
var cpoint = [currentCenter.lng, currentCenter.lat]; //中心点坐标
// placeSearch.searchNearBy('', cpoint, 200, function(status, result) {
// });
// 经纬度 -> 地址
searchPoint(cpoint)
searchPoi(cpoint)
});
// map.on('com', function(ev) {
// // 触发事件的对象
// var target = ev.target;
// // 触发事件的地理坐标，AMap.LngLat 类型
// // var lnglat = ev.lnglat;
// // // 触发事件的像素坐标，AMap.Pixel 类型
// // var pixel = ev.pixel;
// // 触发事件类型
// var type = ev.type;
// console.log(type);
// var currentCenter = map.getCenter();
// console.log(currentCenter.lng + "-- lat = " + currentCenter.lat);
// //map.panTo([currentCenter.lng, currentCenter.lat]);
// var cpoint = [currentCenter.lng, currentCenter.lat]; //中心点坐标
// // placeSearch.searchNearBy('', cpoint, 200, function(status, result) {
// // });
// searchPoi(cpoint)
// });
function searchPoint(point) {
geocoder.getAddress(point, function(status, result) {
if (status === 'complete' && result.regeocode) {
var address = result.regeocode.formattedAddress;
// console.log(result);
// console.log(
// result.regeocode.addressComponent.province+
// result.regeocode.addressComponent.city+
// result.regeocode.addressComponent.district+
// result.regeocode.addressComponent.township+
// result.regeocode.addressComponent.street+
// result.regeocode.addressComponent.streetNumber;
// )
console.log(result.regeocode.formattedAddress)
selectTitle = result.regeocode.formattedAddress
selectAddress = result.regeocode.addressComponent.province +
result.regeocode.addressComponent.city +
result.regeocode.addressComponent.district +
result.regeocode.addressComponent.township +
result.regeocode.addressComponent.street +
result.regeocode.addressComponent.streetNumber;
document.getElementById('address').innerHTML = selectTitle;
document.getElementById('tipinput').innerHTML = '';
} else {
}
});
}
function searchPoi(point) {
placeSearch.searchNearBy('', point, 200, function(status, result) {
});
}
function searchPoi(point, keyStr) {
placeSearch.searchNearBy(keyStr, point, 200, function(status, result) {
});
}
placeSearch.on('markerClick', function(ev) {
var type = ev.type;
console.log("markerClick");
console.log(ev);
});
//地址列表选中item
placeSearch.on('selectChanged', function(ev) {
var type = ev.type;
//console.log(type);
console.log(ev.selected.data);
// console.log(ev.selected.data.name);
// console.log(ev.selected.data.cityname + ev.selected.data.adname +
// ev.selected.data.address);
console.log(ev.selected.data.location.lat);
selectTitle = ev.selected.data.name;
selectAddress = ev.selected.data.cityname + ev.selected.data.adname +
ev.selected.data.address;
console.log("selectTitle = " + selectTitle);
console.log("selectAddress = " + selectAddress);
document.getElementById('address').innerHTML = selectTitle;
});
</script>
</html>
2.高德地图JS API地址
获取地图中心点/级别-地图属性-示例中心-JS API 2.0 示例 | 高德地图API高德开放平台官网
https://lbs.amap.com/demo/jsapi-v2/example/map/get-mapzoom
1244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
