本頁面還涉及到定位圖標位置問題。
<body>
<div id="container"></div>
<!-- <a id="dwmer" onclick="geolocation.getCurrentPosition()">定位</a> -->
<a id="dwmer" onclick="geo()"><img class='icon' /></a>
<div id="loadingdiv">
<div id="noner" class="loading-block show">
<img src="<{$resourceUrl}>/md_wechat/image/laoding.gif" alt="">
</div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=867a0ce2d1e84eba833a3c62452f1f3b"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script>
//初始化地圖對象，加載地圖
var geolocation;
var icon2;
var startIcon, startIcon2;
var map = new AMap.Map("container", {
resizeEnable: true
});
AMap.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默認:true
timeout: 10000, //超過10秒後停止定位，默認：5s
showMarker: true, //定位成功後在定位到的位置顯示點標記，默認：true
showCircle: true,
buttonDom: '<input hidden="true" >',
buttonPosition: 'RL', //定位按鈕的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
zoomToAccuracy: false, //定位成功後是否自動調整地圖視野到定位點
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯信息
});
//解析定位結果
function onComplete(data) {
var noner = document.getElementById("noner");
noner.style.display = "none";
}
//解析定位錯誤信息
function onError(data) {
}
//自定義icon
startIcon = new AMap.Icon({
size: new AMap.Size(25, 34),
image: '<{$resourceUrl}>/md_wechat/image/bat_blue.png',
imageSize: new AMap.Size(135, 40),
imageOffset: new AMap.Pixel(-9, -3)
});
startIcon2 = new AMap.Icon({
// 圖標尺寸
size: new AMap.Size(25, 34),
image: '<{$resourceUrl}>/md_wechat/image/myLoct.png',
imageSize: new AMap.Size(135, 40),
imageOffset: new AMap.Pixel(-9, -3)
});
var lnglats = [
[116.368904, 39.923423],
[116.382122, 39.921176],
[116.387271, 39.922501],
[116.398258, 39.914600]
];
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
for (var i = 0, marker; i < lnglats.length; i++) {
testtest(i)
}
function testtest(i) {
// let emarker = `emarker${i}`
var emarker2 = 'emarker'+i;
console.log("emarker2",emarker2)
emarker2 = new AMap.Marker({
position: lnglats[i],
icon: "<{$resourceUrl}>/md_wechat/image/myLoct.png",
map: map
});
var markerContent = document.createElement("div");
var markerImg = document.createElement("div");
// markerImg.className = `markerlnglat markerlnglat${i}`;//設置描點img的統一樣式
markerImg.className +="markerlnglat markerlnglat"+i;
// markerImg.src = '<{$resourceUrl}>/md_wechat/image/myLoct.png';//設置圖片url
markerContent.appendChild(markerImg);
markerContent.appendChild(markerImg);
emarker2.setContent(markerContent);
emarker2.on("click", function (e) {
$(".markerlnglat").removeClass('newIcon');
// $(`.markerlnglat${i}`).addClass('newIcon');
$('.markerlnglat'+i).addClass('newIcon');
infoWindow.setContent('<div class="tece">信息展示</div>')
infoWindow.open(map, e.lnglat);
map.setZoom(13);
})
}
map.setFitView();
var clickEventListener = map.on('click', function (e) {
$(`.markerlnglat`).removeClass('newIcon');
infoWindow.close()
map.setZoom(12);
})
function geo() {
geolocation.getCurrentPosition();
var noner = document.getElementById("noner");
noner.style.display = "block";
}
map.on("complete", function () {
var noner = document.getElementById("noner");
noner.style.display = "none";
});
</script>
<style>
.markerlnglat {
background: url('<{$resourceUrl}>/md_wechat/image/elelogo.png') no-repeat center;
background-size: 100% 100%;
width: 32px;
height: 32px;
}
.newIcon{
width: 39px;
height: 38px;
background: url('<{$resourceUrl}>/md_wechat/image/elelogo.png') no-repeat center;
background-size: 105% 100%;
}
</style>
</body>