高德地图 搜索以后 多个marker绑定点击事件 自定义窗口内容
<script
type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=你自己的key&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"
></script>
<div id="container"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字:</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput" />
</td>
</tr>
</table>
</div>
<div id="tip">
<span id="result"></span>
</div>
<script type="text/javascript">
map = new AMap.Map("container", {
resizeEnable: true,
center: [116.403851, 39.915177],
zoom: 13,
});
var autoOptions = {
input: "tipinput",
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: "",
});
AMap.event.addListener(auto, "select", select);
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
function select(e) {
placeSearch.setCity(e.poi.adcode);
if (e.poi && e.poi.location) {
map.setZoom(15);
map.setCenter(e.poi.location);
}
placeSearch.search(e.poi.name, function (status, result) {
if (status === "complete" && result.info === "OK") {
for (var h = 0; h < result.poiList.pois.length; h++) {
var jy = result.poiList.pois[h]["location"];
var address = result.poiList.pois[h]["address"];
var marker = new AMap.Marker({
map: map,
position: jy,
});
marker.extData = {
getLng: jy["lng"],
getLat: jy["lat"],
address: address,
};
marker.content = "123123123";
marker.on("click", function (e) {
var hs = e.target.extData;
infoWindow.setContent(hs["address"]);
infoWindow.open(map, e.target.getPosition());
console.log(hs);
});
marker.emit("click", { target: marker });
}
}
});
}
marker = new AMap.Marker({
map: map,
position: [116.403851, 39.915177],
});
map.on("click", function (e) {
if (marker) {
marker.setMap(null);
marker = null;
}
getLng = e.lnglat.getLng();
getLat = e.lnglat.getLat();
lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all",
});
geocoder.getAddress(lnglatXY, function (status, result) {
if (status === "complete" && result.info === "OK") {
address = result.regeocode.formattedAddress;
alert(
"您在[ " + result.regeocode.formattedAddress + " ]的位置点击了地图!"
);
}
});
marker = new AMap.Marker({
map: map,
position: lnglatXY,
});
map.setFitView();
});
</script>
作者
xiaoyierle
发表于
2020-11-28 20:55:48
,最后修改于
2020-11-28 20:56:37
Comments