高德地图 搜索以后 多个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>
xml
作者
xiaoyierle
发表于
2020-11-28 20:55:48
,最后修改于
2020-11-28 20:56:37
Comments