高德地图引用，搜索定位

最新推荐文章于 2025-04-27 16:35:34 发布

原创

最新推荐文章于 2025-04-27 16:35:34 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#高德地图

这篇博客介绍了如何在JSP页面中整合并使用高德地图的API，包括搜索和定位功能的实现，提供了详细的js和jsp代码示例。

  
  以下为最近项目中开发的高得地图定位功能，附上效果图与源代码。

   mapUtil.js

 var map,addMarker;
  var geocoder;
  var placeSearch;
  var infoWindow ;
  var markers = [];
  function mapInit(){
      // 加入高的地图
      map = new AMap.Map('container', {
             resizeEnable: true,
             zoom:11,
         	center: [114.06, 22.53]
     });
     AMap.plugin(['AMap.ToolBar','AMap.Scale'],
         function(){
             map.addControl(new AMap.ToolBar());
 
             map.addControl(new AMap.Scale());

     });
     AMap.service('AMap.Geocoder',function(){//回调函数
         //实例化Geocoder
         geocoder = new AMap.Geocoder({
             city: "全国"//城市，默认：“全国”
         });
     });
     // 初始化加载
     myMapViewLocation();
     AMap.service(["AMap.PlaceSearch"], function() {
             placeSearch = new AMap.PlaceSearch();
     });
     infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});//信息窗口
     //为地图注册click事件获取鼠标点击出的经纬度坐标
//     var clickEventListener = map.on('click', function(e) {
//         $("input[name=longitude]").val(e.lnglat.lng);
//         $("input[name=latitude]").val(e.lnglat.lat);
//         // 填写地址
//         writeAddress([e.lnglat.lng,e.lnglat.lat]);
//     });
     //键盘点击搜索
     //placeSearch.search("北京");
     $("#tip").on("keydown",function(event){
         if(event = event || window.event){
             if(event.keyCode==13){
                 mapsearch();
             }
         }
     });  
  }
 //地图搜索
 function mapsearch(){
	//查询前