高德地图定位

发表于 | 分类于

根据传入指定的地址，使用高德地图在地图上进行定位。在使用高德地图前需要先申请开发者Key。
下面添加容器标签：

1
<div id="mapContainer"></div>

引用高德地图js，把key字段替换成自己申请的key：

1
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=高德Key"></script>

下面为主要调用代码，可能直接替换掉需要搜索的地址：“长沙五一广场”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
var map = new AMap.Map("mapContainer", {
	resizeEnable: true,
	zooms: [5,18]
});
var marker = new Array();
var windowsArr = new Array();
//基本地图加载
function placeSearch(){
    var MSearch;
    AMap.service(["AMap.PlaceSearch"], function() {       
        MSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize:1,
            pageIndex:1
            //city:"021" //城市
        });
        //关键字查询
        MSearch.search("长沙五一广场", function(status, result){
        	if(status === 'complete' && result.info === 'OK'){
        		keywordSearch_CallBack(result);
        	}
        }); 
    });
}

placeSearch();
//添加marker&infowindow   
function addmarker(i, d) {
    var lngX = d.location.getLng();
    var latY = d.location.getLat();
    var markerOption = {
        map:map,
        icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
        position:new AMap.LngLat(lngX, latY),
        topWhenMouseOver:true

    };
    var mar = new AMap.Marker(markerOption);         
    marker.push(new AMap.LngLat(lngX, latY));
 
    var infoWindow = new AMap.InfoWindow({
        content:"<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
        size:new AMap.Size(300, 0),
        autoMove:true, 
        offset:new AMap.Pixel(0,-20)
    });
    windowsArr.push(infoWindow);
    var aa = function (e) {infoWindow.open(map, mar.getPosition());};
    AMap.event.addListener(mar, "mouseover", aa);
}
//回调函数
function keywordSearch_CallBack(data) {
    var resultStr = "";
    var poiArr = data.poiList.pois;
    var resultCount = poiArr.length;
    for (var i = 0; i < resultCount; i++) {
        resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
            resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
            addmarker(i, poiArr[i]);
    }
    map.setFitView();
}
function TipContents(type, address, tel) {  //窗体内容
    if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
        type = "暂无";
    }
    if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
        address = "暂无";
    }
    if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
        tel = "暂无";
    }
    var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type;
    return str;
}
function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip
    thiss.style.background = '#CAE1FF';
    windowsArr[pointid].open(map, marker[pointid]);
}
function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
    thiss.style.background = "";
}