使用javaScript从高德地图获取数据
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
使用javaScript从高德地图获取数据
12308047 姚逸璠
A、工具:Visual Studio 2010
B、语言:HTML、javaScript
C、实现流程:
1、在visual studio中,点击文件->新建->网站,得到下图:
选择:空网站。
2、在“设计”视图下,使用工具箱分别添加一个“div容器”,与
一个“Button”,如下:
3、转到“源”视图,为Button添加监听器onclick,并附上
javascript代码,代码如下所示(注意需要填入申请的高德map 的key,以及构造map时使用我们刚刚添加的容器)
body{
margin:0;
height:100%;
width:100%;
position:absolute;
font-size:12px;
}
#mapContainer{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
}
#mapSearch1{
position: absolute;
top:0;
left: 100;
pageIndex:1;
}
var map = new AMap.Map("mapContainer", {
resizeEnable: true
});
var marker = new Array();
var windowsArr = new Array();
//基本地图加载
function placeSearch(){
var MSearch;
AMap.service(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize:10,
pageIndex:1,
city:"020" //城市
});
//关键字查询
MSearch.search('白云宾馆', function(status, result){
if(status === 'complete' && === 'OK'){
keywordSearch_CallBack(result);
}
else{ alert("Failed");}
});
});
}
// placeSearch();
//添加marker&infowindow
function addmarker(i, d) {
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:map,
icon:"/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 Window({
content:"
" + (i + 1) + ". " + + "
" + 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 += "
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;\">
" + " | 名称: " + poiArr[i].name +"; |
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 = "暂无";
}