javaee论坛

普通会员

225648

帖子

331

回复

345

积分

楼主
发表于 2017-08-18 09:01:17 | 查看: 102 | 回复: 1

api官网链接:

http://api.amap.com/Javascript/example#

http://api.amap.com/Javascript/plugin_detail/id/0


代码示例如下(保存为html打开可见效果如下图):


<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>按关键字查询</title><!-- <style>body{ margin:0; padding:0;font:12px/16px Verdana, Helvetica, Arial, sans-serif;}</style> --><link rel="stylesheet" href="/Public/Css/demo.Default.css" type="text/css"/><script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3e4ad80bb35e0d2f4a0ccd9779162923"></script><script language="javascript">var mapObj;var marker = new Array();var windowsArr = new Array(); //基本地图加载function mapInit() {    mapObj = new AMap.Map("iCenter",{        level:13,          center:new AMap.LngLat(116.397428,39.90923)    });}function placeSearch() {    var MSearch;    mapObj.plugin(["AMap.PlaceSearch"], function() {                MSearch = new AMap.PlaceSearch({ //构造地点查询类            city:"成都" //城市        });         AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果        MSearch.search("宽窄巷子"); //关键字查询    });}//添加marker&infowindow    function addmarker(i, d) {    var lngX = d.location.getLng();    var latY = d.location.getLat();    var markerOption = {	    map:mapObj,        icon:"http://api.amap.com/webapi/static/Images/" + (i + 1) + ".png",        position:new AMap.LngLat(lngX, latY)    };    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,d.location),        size:new AMap.Size(300, 0),         autoMove:true,  		offset:new AMap.Pixel(0,-30)    });    windowsArr.push(infoWindow);     var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};	AMap.event.addListener(mar, "click", 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://api.amap.com/webapi/static/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,poiArr[i].location) + "</td></tr></table></div>";            addmarker(i, poiArr[i]);    }    mapObj.setFitView();    document.getElementById("result").innerHTML = resultStr;}function TipContents(type, address, tel,location) {  //窗体内容    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 tel == "undefined") {        tel = "暂无";    }    if (location == "" || location == "undefined" || location == null || location == " undefined" || typeof location == "undefined") {        location = "暂无";    }    var str = "  地址:" + address + "<br />  电话:" + tel + " <br />  类型:" + type+"<br />  经纬度:"+location;    return str;}function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip    thiss.style.background = '#CAE1FF';    windowsArr[pointid].open(mapObj, marker[pointid]);}function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复    thiss.style.background = "";}function showmap(){mapInit();placeSearch();}</script></head><body onload="showmap();">  <table width="661px"  border="0" cellpadding="0" cellspacing="0">    <tr>        <td><div id="iCenter" style="height:300px;width=661px "></div></td>    </tr>     <hr>    <tr>        <td>            <div id="result" name="result" style="overflow:auto;margin-top:5px;width:661px;height:255px"></div>        </td>    </tr></table>         </body></html>



普通会员

0

帖子

339

回复

347

积分
沙发
发表于 2024-02-25 01:54:33

标记一下

您需要登录后才可以回帖 登录 | 立即注册

触屏版| 电脑版

技术支持 历史网 V2.0 © 2016-2017