高德地图引用，搜索定位

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

   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(){
	//查询前先移除所有标注
	 if(map.getAllOverlays()!=''){
		 map.remove(marker);
		 map.remove(markers);
		 }
     var searchVal = $("#tip").val();
     placeSearch.search(searchVal,function(status, result){
    	 if (status === 'complete' && result.info === 'OK') {
             var poiArr = result.poiList.pois;
             var str = "<ul>";
             for(var i=0;i<poiArr.length;i++){
                  //在地图上创建标注点
                  marker = new AMap.Marker({
                      icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
                  });
                  marker.setPosition(new AMap.LngLat(poiArr[i].location.lng,poiArr[i].location.lat));
                  marker.setMap(map);
                  marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
                      offset: new AMap.Pixel(3, 0),//修改label相对于maker的位置
                      content: String.fromCharCode(65+i)
                  });
                  marker.content = poiArr[i].name+"<br/>"+poiArr[i].address;
                  marker.on('click', markerClick);
                  markers.push(marker);
                  map.setFitView();
                     str+='<li>';
                      str+='<div class="res-data">';
                      str+='<div class="left res-marker">';
                      str+='<span>'+String.fromCharCode(65+i)+'</span>';
                      str+='</div>';
                          str+='<div class="left res-address">';
                              str+='<div class="title">'+poiArr[i].name+'</div>';
                              str+='<div>POI：<span class="poi">'+poiArr[i].id+'</span></div>';
                              str+='<div>地址：<span class="rout">'+poiArr[i].address+'</span></div>';
                              str+='<div>坐标：经度<span class="point">'+poiArr[i].location.lng+",纬度,"+poiArr[i].location.lat+'</span></div>';
                          str+='</div>';
                      str+='</div>';
                  str+='</li>';
             }
              str+='</ul>';
              $("#panel").html(str);
    	 }else{
    		 new CAlert().toast_ERROR("未查询到相关地址");
    		 }
    		 });
     
 }
 // 初始化回显
 function myMapViewLocation(){
     //console.log("回显坐标");
     var mlon = $("input[name=longitude]").val();
     var mlat = $("input[name=latitude]").val();
     var lnglatXY = [mlon,mlat];
     if(mlon&&mlat){
         addMarker(lnglatXY);
     }
 }
 // 实例化点标记
 function addMarker(lnglatXY) {
	 if(map.getAllOverlays()!=''){
	 map.remove(marker);
	 map.remove(markers);
	 }
	 marker = new AMap.Marker({
         icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
         position: lnglatXY
     });
     marker.setMap(map);
     map.setFitView();// 执行定位
 }
 // 填写地址
 function writeAddress(lnglatXY){
     geocoder.getAddress(lnglatXY, function(status, result) {
         if (status === 'complete' && result.info === 'OK') {
             geocoder_CallBack(result);
         }
     }); 
 }
 //点击标注  显示信息窗口及内容
 function markerClick(e) {
     infoWindow.setContent(e.target.content);
     infoWindow.open(map, e.target.getPosition());
 }
 // 地址回调
 function geocoder_CallBack(data) {
     var address = data.regeocode.formattedAddress; //返回地址描述
     $("input[name=address_detail]").val(address);
 }

以下为jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<jsp:include page="/include/head.jsp" />
		<link href="/css/page.css" rel="stylesheet" type="text/css" />
		<link href="/css/mapUtil.css" rel="stylesheet" type="text/css" />		
		<!--引入高德地图JSAPI -->
		<script src="//webapi.amap.com/maps?v=1.3&key=自己的key"></script>
		<!--引入UI组件库（1.0版本） -->
		<script type="text/javascript" src="/js/mapUtil.js"></script>				
		<script src="//webapi.amap.com/ui/1.0/main.js"></script>
		<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<!--<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> -->
		<script type="text/javascript">
		$(function() {
			mapInit();	//地图初始化
			//搜索列表选中事件
		     $("#panel").on("click","li",function(){
		            var point = $(this).find(".point").text();
		            var strs= new Array(); //定义一数组
		            strs=point.split(","); //字符分割 
		            $("#latitude").val(strs[2]);//纬度赋值
		            $("#longitude").val(strs[0]);//经度赋值
					
		            var addr =  $(this).find(".rout").text();
		            $("#address_detail").val(addr);//详细地址赋值

		            var poi = $(this).find(".poi").text();
		            $("#poi").val(poi);//poi赋值

		            var position=[strs[0],strs[2]];
		            addMarker(position);//标记
		            $("#panel li").css("background-color","#fff");
		            $(this).css("background-color","#f0f0f0");
		        });
		
		</script>
		
	</head>
	<body>
           <div id="container">
		<input id="tip" placeholder="请输入搜索地址" name="tip" class="inp260" maxlength="20"/> 
		<input type="button" id="tip" value="搜索" onclick="mapsearch()"/>
		</div>												
		<div id="panel">
          </div>																									
	</body>
</html>

以上为完整的js代码+jsp代码，供大家参考。