z 中英地图定位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地图热点中英</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
.map {
height: 100%;
width: 100%;
float: left;
}
.info-title {
font-weight: bolder;
color: #fff;
font-size: 14px;
line-height: 26px;
padding: 0 0 0 6px;
background: #25A5F7
}
.info-content {
padding: 4px;
color: #666666;
line-height: 23px;
font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
}
.info-content img {
float: left;
margin: 3px;
}
.amap-info-combo .keyword-input {
height: auto;
}
</style>
<!-- &plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=389880a06e3f893ea46036f030c94700"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container" class="map"></div>
<div id="tip">鼠标悬停热点试试</div>
<script>
var amap = new AMap.Map('container', {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13,
isHotspot: true,
lang: "zh_en" //可选值：en，zh_en, zh_cn
});
var map = amap;
var jmaddress = '广东省深圳市龙岗区爱联地铁站';
//构建信息窗体中显示的内容
var content = `
<div><img style="height:38px;" src=""></div>
<div style="padding:7px 0px 0px 0px;">
<p style="color:#CC5522;font-size:16px;">广东省深圳市龙岗区爱联地铁站</p>
<p>广东省深圳市龙岗区爱联地铁站</p>
</div>
`;
// 同时引入工具条插件，比例尺插件和鹰眼插件
AMap.plugin([
'AMap.ToolBar',
'AMap.Scale',
'AMap.OverView',
'AMap.MapType',
'AMap.Geolocation',
'AMap.Geocoder',
'AMap.AdvancedInfoWindow',
'AMap.PlaceSearch'
], function () {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
amap.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
amap.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
amap.addControl(new AMap.OverView({
isOpen: true
}));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
//amap.addControl(new AMap.MapType());
// (用户当前位置)在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
// amap.addControl(new AMap.Geolocation());
// 地址解析（地址=>经纬度）
geocoder = new AMap.Geocoder({
// city: "010", //城市设为北京，默认：“全国”
});
geocoder.getLocation(jmaddress, function (status, result) {
// console.log(status);
// console.log(result);
if (status === 'complete' && result.info === 'OK') {
// console.log(result.geocodes[0]);
var guide = result.geocodes[0].location;
amap.setCenter([guide.lng, guide.lat]);
marker = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
// position: [116.397428, 39.90923], //设置标记点位置
position: amap.getCenter(),
map: amap //立即添加到地图上，或者用下面的方式添加
});
openInfo();
marker.on('click', openInfo); //绑定click事件
} else {
console.log('未获取到地址信息');
}
})
amap.on('hotspotclick', function (result) {
console.log(result);
// placeSearch.getDetails(result.id, function(status, result) {
// if (status === 'complete' && result.info === 'OK') {
// placeSearch_CallBack(result);
// }
// });
});
});
//在指定位置打开信息窗体
function openInfo() {
infoWindow = new AMap.InfoWindow({
// isCustom: true, //使用自定义窗体
content: content, //使用默认信息窗体框样式，显示信息内容
offset: new AMap.Pixel(0, -32), //窗口偏移位置
// anchor: 'bottom-center',
closeWhenClickMap: true, //点击其他地方关闭
});
infoWindow.open(amap, marker.getPosition());
}
// var placeSearch = new AMap.PlaceSearch(); //构造地点查询类
// var infoWindow = new AMap.AdvancedInfoWindow({});
// map.on('hotspotclick', function (result) {
// console.log(result);
// placeSearch.getDetails(result.id, function (status, result) {
// if (status === 'complete' && result.info === 'OK') {
// placeSearch_CallBack(result);
// }
// });
// });
// //回调函数
// function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
// var poiArr = data.poiList.pois;
// var location = poiArr[0].location;
// infoWindow.setContent(createContent(poiArr[0]));
// infoWindow.open(map, location);
// }
// function createContent(poi) { //信息窗体内容
// var s = [];
// s.push('<div class="info-title">' + poi.name + '</div><div class="info-content">' + "地址：" + poi.address);
// s.push("电话：" + poi.tel);
// s.push("类型：" + poi.type);
// s.push('<div>');
// return s.join("<br>");
// }
</script>
</body>
</html>
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
