地图详细 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <meta name="viewport" content="width=device-width, initial-scale=1">
  6         <title></title>
  7         <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.js"></script>
  8         <style>
  9             #mapContainer{
 10                 height: 800px;
 11             }
 12             #keyword{
 13                 width: 400px;
 14             }
 15         </style>
 16     </head>
 17     <body>
 18         <div id="mapContainer"></div>
 19         <input id="keyword">
 20         <input name='lnglat'>
 21         <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.7&key=f2f635dee0cfc2097ea52f68c376cae1&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
 22         <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
 23         <script>
 24             // 地图
 25             var map = new AMap.Map("mapContainer", {
 26                 resizeEnable: true,
 27                 zoom: 13, //地图显示的缩放级别
 28                 keyboardEnable: false
 29             });
 30             AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], function() {
 31                 var geocoder = new AMap.Geocoder({
 32                     radius: 1000,
 33                     extensions: "all"
 34                 });
 35                 var geolocation = new AMap.Geolocation({
 36                     // 是否使用高精度定位，默认：true
 37                     enableHighAccuracy: true,
 38                     // 设置定位超时时间，默认：无穷大
 39                     timeout: 10000,
 40                     // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
 41                     buttonOffset: new AMap.Pixel(10, 20),
 42                     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
 43                     zoomToAccuracy: true,
 44                     //  定位按钮的排放位置,  RB表示右下
 45                     buttonPosition: 'RT'
 46                 })
 47                 var autoOptions = {
 48                     city: "北京", //城市，默认全国
 49                     input: "keyword" //使用联想输入的input的id
 50                 };
 51                 autocomplete = new AMap.Autocomplete(autoOptions);
 52                 var placeSearch = new AMap.PlaceSearch({
 53                     city: '北京',
 54                     map: map
 55                 });
 56 
 57                 AMap.event.addListener(autocomplete, "select", function(e) {
 58                     //TODO 针对选中的poi实现自己的功能
 59                     placeSearch.setCity(e.poi.adcode);
 60                     placeSearch.search(e.poi.name);
 61                 });
 62 
 63                 //为地图注册click事件获取鼠标点击出的经纬度坐标
 64                 var marker = [];
 65                 var clickEventListener = map.on('click', function(e) {
 66                     map.remove(marker);
 67                     marker = [];
 68                     marker = new AMap.Marker({
 69                         map: map,
 70                         position: [e.lnglat.getLng(), e.lnglat.getLat()]
 71                     });
 72                     geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()], function(status, result) {
 73                         if (status === 'complete' && result.info === 'OK') {
 74                             console.log(result);
 75                             $("#keyword").val(result.regeocode.formattedAddress);
 76                             $("[name=lnglat]").val(result.regeocode.pois[0].location.lng + " ， " + result.regeocode.pois[0].location.lat);
 77                         }
 78                     });
 79                 });
 80             })
 81             map.plugin('AMap.Geolocation', function() {
 82                 geolocation = new AMap.Geolocation({
 83                     enableHighAccuracy: true, //是否使用高精度定位，默认:true
 84                     timeout: 10000, //超过10秒后停止定位，默认：无穷大
 85                     buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
 86                     zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
 87                     buttonPosition: 'RB'
 88                 });
 89                 map.addControl(geolocation);
 90                 geolocation.getCurrentPosition();
 91                 AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
 92                 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
 93                 //解析定位结果
 94                 function onComplete(data) {
 95                     $("#keyword").val(data.formattedAddress);
 96                     console.log(data);
 97                 }
 98                 //解析定位错误信息
 99                 function onError(data) {
100                     alert("定位失败");
101                 }
102             });
103         </script>
104     </body>
105 </html>

 

posted @ 2018-10-23 10:21  我爱大西瓜  阅读(323)  评论(0)    收藏  举报