<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8"/>
<title>关键字查询</title>
<link rel="stylesheet" type="text/css" href="/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=c84af8341b1cc45c801d6765cda96087"></script>
<script language="javascript">
var mapObj
var marker = new Array()
var windowsArr = new Array()
//基本地图加载
function mapInit() {
mapObj = new AMap.Map("iCenter")
}
function placeSearch() {
var MSearch
mapObj.plugin(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({ //构造地点查询类
city:"021" //城市
})
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://webapi.amap.com/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),
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 = 0i <resultCounti++) {
resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12pxcursor:pointerpadding:0px 0 4px 2pxborder-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])
}
mapObj.setFitView()
document.getElementById("result").innerHTML = resultStr
}
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(mapObj, marker[pointid])
}
function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
thiss.style.background = ""
}
</script>
</head>
<body onload="mapInit()">
<div id="iCenter"></div>
<div class="demo_box">
<p><input type="button" value="查询" onclick="placeSearch()"/><br />
</p>
<div id="r_title"><b>关键字查询结果:</b></div>
<div id="result"></div>
</div>
</body>
</html>
更多0
将高德地图用到html中步骤：
1、页面引入API：
1<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
2、html：
1<div id="container" style="width:500px height:300px"></div>
3、JS代码：
1234var map = new AMap.Map('container',{ zoom: 10, center: [116.39,39.9]})
HTML5怎么用高德地图API返回当前位置的经纬度：
1、当手机采集的地理位置（经纬度）发生改变时在界面上显示出改变后的经纬度。
2、如果开发过android原生定位程序的开发者应该对这部分代码不陌生，中规中矩，先注册位置监听服务，然后当位置发生改变后出发onLocationChanged()方法。
3、现在请在官网上下载示例代码，导入工程后开启包com.amap.cn.apis.location中的MyLocation.java文件，该文件实现的主要功能是：初始化地图并且实现首次定位，地图会自动移动到定位点，我们一会便要基于这个文件来完成地图自动实时定位的功能。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）