首页 > 编程知识 正文

高德地图标记

时间:2023-05-03 12:34:46 阅读:278126 作者:3241

<!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" rel="external nofollow" href="https://cache.amap.com/lbs/static/main1119.css"/> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script></head><body><div id="container"></div><div id="myPageTop"> <table> <tr> <td> <label>请输入关键字:</label> </td> </tr> <tr> <td> <input id="tipinput"/> </td> </tr> </table></div> <script src="/JS/jquery.min.js"></script><script type="text/javascript"> //1.获取搜索信息标记,点击获取标点信息 var map = new AMap.Map("container", { resizeEnable: true }); //输入提示 var autoOptions = { input: "tipinput" }; var auto = new AMap.Autocomplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ map: map }); //构造地点查询类 AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发 function select(e) { placeSearch.setCity(e.poi.adcode); placeSearch.search(e.poi.name); //关键字查询查询 } //点击事件 AMap.event.addListener(placeSearch, "markerClick", function (e) { console.log(e.data.location);//当前marker的经纬度信息 console.log(e.data.address);//获取当前marker的具体地址信息 console.log(e.data);//则是包含所有的marker数据 }); //2.单个定位无信息 //定位蓝色图标 //let marker = new AMap.Marker(); //AMap.plugin(["AMap.Autocomplete"], () => { // let autocomplete = new AMap.Autocomplete({ input: "tipinput" }); // AMap.event.addListener(autocomplete, "select", (e) => { // //经度 // this.lnglatX = e.poi.location.lng; // //纬度 // this.lnglatY = e.poi.location.lat; // //鼠标滑过点标时的文字提示 // console.log(e); // marker.setTitle(e.poi.name); // marker.setPosition(e.poi.location); // marker.setMap(map); // map.setCenter(marker.getPosition()); // //自动缩放地图到合适的视野级别 // map.setFitView(); // }); // //点击地图 // map.on('click', (e) => { // //经度 // this.lnglatX = e.lnglat.lng; // //纬度 // this.lnglatY = e.lnglat.lat; // /* // * 点击地图,没有提示名称,因为有些地点没有名称,获取不到。 // * marker.setTitle('');发现执行之后,还是显示上次的名次, // * 只能先删除,重新添加。测试没问题。 // */ // console.log(e); // map.remove(marker); // marker = new AMap.Marker(); // marker.setPosition(e.lnglat); // marker.setMap(map); // map.setCenter(marker.getPosition()); // //自动缩放地图到合适的视野级别 // map.setFitView(); // }); // //编辑 // if(this.editId) { // marker.setPosition([this.lnglatX, this.lnglatY]); // marker.setMap(map); // map.setCenter(marker.getPosition()); // //自动缩放地图到合适的视野级别 // map.setFitView(); // } // });</script></body></html>

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。