html5 天地图,index.html

天地图－地图API－范例－根据关键字搜索纯POI(不搜公交线)

.search {

font-size: 13px;

border: 1px solid #999999;

}

.ls {

line-height: 27px;

padding-left: 7px;

}

.prompt {

display: none;

font-size: 13px;

border: 1px solid #999999;

}

.statistics {

display: none;

font-size: 13px;

border: 1px solid #999999;

overflow-y: scroll;

height: 150px;

}

.suggests {

display: none;

font-size: 13px;

border: 1px solid #999999;

}

.lineData {

display: none;

font-size: 13px;

border: 1px solid #999999;

}

.result {

display: none;

font-size: 12px;

border: 1px solid #999999;

line-height: 27px;

padding-left: 7px;

}

var map;

var zoom = 12;

var localsearch;

var infoWin;

function onLoad() {

//初始化地图对象

map = new T.Map("mapDiv", {

projection: 'EPSG:4326',

datasourcesControl: true

});

//创建对象

var ctrl = new T.Control.MapType();

//添加控件

map.addControl(ctrl);

//设置显示地图的中心点和级别

map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);

var config = {

pageCapacity: 10,//每页显示的数量

onSearchComplete: localSearchResult//接收数据的回调函数

};

//创建搜索对象

localsearch = new T.LocalSearch(map, config);

rectTool = new T.RectangleTool(map);

rectTool.on('draw', function (e) {

onDrawCircle(e.currentRectangle.getLngLats()[0][0].lng,

e.currentRectangle.getLngLats()[0][0].lat,

e.currentRectangle.getLngLats()[0][2].lng,

e.currentRectangle.getLngLats()[0][2].lat,

);

generate_url();

});

var config2 = {

showLabel: true,

color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5

};

//创建标注工具对象

polygonTool = new T.PolygonTool(map, config2);

polygonTool.on('draw', function (e) {

var result = ""

for(var i=0; i

result += e.currentLnglats[i].lng;

result += ",";

result += e.currentLnglats[i].lat;

result += ";"

}

document.getElementById('info').value = result.substr(0, result.length-1)

generate_url();

});

load_polygen();

}

function getUrlParam(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if(r != null) {

//return unescape(r[2]);

return r[2];

}

return null;

}

function generate_url(){

var url = document.getElementById('info').value;

var base_url = window.location.href.split("?")[0]

var t_url = base_url + "?points="+url;

document.getElementById('url').value = t_url;

}

function load_polygen(){

var url_points = getUrlParam("points")

if (!url_points){

return;

}

document.getElementById('info').value = url_points;

var lnglats = url_points.split(";")

var points=[];

for (var i=0; i

var tmp = lnglats[i].split(",");

points.push(new T.LngLat(tmp[0], tmp[1]));

}

//创建面对象

var polygon = new T.Polygon(points,{

color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5

});

//向地图上添加面

map.addOverLay(polygon);

map.centerAndZoom(points[0], 13);

}

function onDrawCircle(a, b, c, d) {

document.getElementById('info').value = a +"," + b + ";"+ c + "," + b + ";" +c + "," + d + ";" + a + "," + d + ";" + a +"," + b;

}

function localSearchResult(result) {

//清空地图及搜索列表

clearAll();

//添加提示词

prompt(result);

//根据返回类型解析搜索结果

switch (parseInt(result.getResultType())) {

case 1:

//解析点数据结果

pois(result.getPois());

break;

case 2:

//解析推荐城市

statistics(result.getStatistics());

break;

case 3:

//解析行政区划边界

area(result.getArea());

break;

}

}

//解析提示词

function prompt(obj) {

var prompts = obj.getPrompt();

if (prompts) {

var promptHtml = "";

for (var i = 0; i < prompts.length; i++) {

var prompt = prompts[i];

var promptType = prompt.type;

var promptAdmins = prompt.admins;

var meanprompt = prompt.DidYouMean;

if (promptType == 1) {

promptHtml += "

您是否要在" + promptAdmins[0].name + "搜索更多包含" + obj.getKeyword() + "的相关内容？

";

}

else if (promptType == 2) {

promptHtml += "

在" + promptAdmins[0].name + "没有搜索到与" + obj.getKeyword() + "相关的结果。

";

if (meanprompt) {

promptHtml += "

您是否要找：" + meanprompt + "

";

}

}

else if (promptType == 3) {

promptHtml += "

有以下相关结果，您是否要找：

"

for (i = 0; i < promptAdmins.length; i++) {

promptHtml += "

" + promptAdmins[i].name + "

";

}

}

}

if (promptHtml != "") {

document.getElementById("promptDiv").style.display = "block";

document.getElementById("promptDiv").innerHTML = promptHtml;

}

}

}

//解析点数据结果

function pois(obj) {

if (obj) {

//显示搜索列表

var divMarker = document.createElement("div");

//坐标数组，设置最佳比例尺时会用到

var zoomArr = [];

for (var i = 0; i < obj.length; i++) {

//闭包

(function (i) {

//名称

var name = obj[i].name;

//地址

var address = obj[i].address;

//坐标

var lnglatArr = obj[i].lonlat.split(" ");

var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);

var winHtml = "地址:" + address;

//创建标注对象

var marker = new T.Marker(lnglat);

//地图上添加标注点

map.addOverLay(marker);

//注册标注点的点击事件

marker.addEventListener("click", function () {

this.showPosition(marker, name, winHtml);

}, this);

zoomArr.push(lnglat);

//在页面上显示搜索的列表

var a = document.createElement("a");

a.href = "javascript://";

a.innerHTML = name;

a.onclick = function () {

showPosition(marker, name, winHtml);

}

divMarker.appendChild(document.createTextNode((i + 1) + "."));

divMarker.appendChild(a);

divMarker.appendChild(document.createElement("br"));

})(i);

}

//显示地图的最佳级别

map.setViewport(zoomArr);

//显示搜索结果

divMarker.appendChild(document.createTextNode('共' + localsearch.getCountNumber() + '条记录，分' + localsearch.getCountPage() + '页,当前第' + localsearch.getPageIndex() + '页'));

document.getElementById("searchDiv").appendChild(divMarker);

document.getElementById("resultDiv").style.display = "block";

}

}

//显示信息框

function showPosition(marker, name) {

if (infoWin) {

map.removeOverLay(infoWin);

infoWin = null;

}

var html = "

" + name + "

";

infoWin = new T.InfoWindow(html, new T.Point([0, 0]));

marker.openInfoWindow(infoWin);

}

//解析推荐城市

function statistics(obj) {

if (obj) {

//坐标数组，设置最佳比例尺时会用到

var pointsArr = [];

var priorityCitysHtml = "";

var allAdminsHtml = "";

var priorityCitys = obj.priorityCitys;

if (priorityCitys) {

//推荐城市显示

priorityCitysHtml += "在中国以下城市有结果

• ";

for (var i = 0; i < priorityCitys.length; i++) {

priorityCitysHtml += "

" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")";

}

priorityCitysHtml += "

";

}

var allAdmins = obj.allAdmins;

if (allAdmins) {

allAdminsHtml += "更多城市

• ";

for (var i = 0; i < allAdmins.length; i++) {

allAdminsHtml += "

" + allAdmins[i].name + "(" + allAdmins[i].count + ")";

var childAdmins = allAdmins[i].childAdmins;

if (childAdmins) {

for (var m = 0; m < childAdmins.length; m++) {

allAdminsHtml += "

" + childAdmins[m].name + "(" + childAdmins[m].count + ")

";

}

}

allAdminsHtml += "

"

}

allAdminsHtml += "

";

}

document.getElementById("statisticsDiv").style.display = "block";

document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;

}

}

//解析行政区划边界

function area(obj) {

if (obj) {

if(obj.points){

//坐标数组，设置最佳比例尺时会用到

var pointsArr = [];

var points = obj.points;

for (var i = 0; i < points.length; i++) {

var regionLngLats = [];

var regionArr = points[i].region.split(",");

for (var m = 0; m < regionArr.length; m++) {

var lnglatArr = regionArr[m].split(" ");

var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);

regionLngLats.push(lnglat);

pointsArr.push(lnglat);

}

//创建线对象

var line = new T.Polyline(regionLngLats, {

strokeColor: "blue",

strokeWeight: 3,

strokeOpacity: 1,

strokeStyle: "dashed"

});

//向地图上添加线

map.addOverLay(line);

}

//显示最佳比例尺

map.setViewport(pointsArr);

}

if(obj.lonlat){

var regionArr = obj.lonlat.split(",");

map.panTo(new T.LngLat(regionArr[0], regionArr[1]));

}

}

}

//清空地图及搜索列表

function clearAll() {

map.clearOverLays();

document.getElementById("searchDiv").innerHTML = "";

document.getElementById("resultDiv").style.display = "none";

document.getElementById("statisticsDiv").innerHTML = "";

document.getElementById("statisticsDiv").style.display = "none";

document.getElementById("promptDiv").innerHTML = "";

document.getElementById("promptDiv").style.display = "none";

document.getElementById("suggestsDiv").innerHTML = "";

document.getElementById("suggestsDiv").style.display = "none";

document.getElementById("lineDataDiv").innerHTML = "";

document.getElementById("lineDataDiv").style.display = "none";

}

//清除覆盖物

function remove_overlay(){

map.clearOverLays();

}

本示例演示如何根据关键字搜索纯POI(不搜公交线)

转到第页

value="转到"/>

一键复制

编辑

Web IDE

原始数据

按行查看

历史