摘要：地图服务，大家能想到哪些？POI搜素，输入提示，地址解析，公交导航，驾车导航，步行导航，道路查询（交叉口），行政区划等等。如果说覆盖物Marker是地图的骨骼，那么服务，就是地图的气血。有个各种各样的地图服务，我们的地图应用才能变得有血有肉，活灵活现。第四篇拆成了几个要点，本篇主要讲搜索服务。包括周边搜索，关键词搜索，范围搜索，搜索提示（自动完成，输入提示），行政区域，交叉路口，检索自有数据（云图）。
示意图1：自动完成，输入提示
示意图2：云图，自有数据检索，A-H图标显示，麻点图
---------------------------------------------------------------------------------------
一、POI搜索
1、关键字查询
使用search方法，传一个关键词参数即可。
MSearch.search('东方明珠'); //关键字查询
完整代码：
//关键词查询
function placeSearch1() {
mapObj.plugin(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize:10,
pageIndex:1,
city:"021" //城市
AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
MSearch.search('东方明珠'); //关键字查询
2、输入提示
html部分：
&div class="autoclass"&
&input type="text" id="keyword" name="keyword" value="" style="width: 95%;"/&
&div id="result1" class="autobox" name="result1"&&/div&
在地图初始化时，添加【自动完成/输入提示】插件。
//加载输入提示插件
mapObj.plugin(["AMap.Autocomplete"], function() {
//判断是否IE浏览器
if (navigator.userAgent.indexOf("MSIE") & 0) {
document.getElementById("keyword").onpropertychange = autoS
document.getElementById("keyword").oninput = autoS
输入提示部分：
//输入提示
function autoSearch() {
var keywords = document.getElementById("keyword").
var autoOptions = {
pageIndex:1,
pageSize:10,
city: "" //城市，默认全国
auto = new AMap.Autocomplete(autoOptions);
//查询成功时返回查询结果
AMap.event.addListener(auto, "complete", autocomplete_CallBack);
auto.search(keywords);
3、周边查询
使用searchNearBy方法，需要传入关键词，中心点经纬度，搜索半径。
MSearch.searchNearBy("酒店", cpoint, 500);
全部代码：
//周边查询函数
var cpoint = new AMap.LngLat(116..907761); //搜索查询的中心点设置
function placeSearch2() {
//加载服务插件，实例化地点查询类
mapObj.plugin(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({
city: "北京"
//查询成功时的回调函数
AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);
//周边搜索
MSearch.searchNearBy("酒店", cpoint, 500);
4、可视区域查询&5、范围内查询
范围内查询，可以是多边形，可以是圆形，也可以是矩形。
我们在这里，用一个矩形搜索来举例。
使用searchInBounds方法，传入关键词，与范围即可。
MSearch.searchInBounds("酒店", new AMap.Bounds(arr[0], arr[2])); //范围查询
可视区域，就是视野内查询，这时可以获取整个可视区域，把这个区域传给范围内搜索即可。
mapObj.getBounds(); //获取可视区域范围
全部代码：
//范围内搜索-矩形
function placeSearch3(){
clearMap();
var arr = new Array();
//绘制矩形边框
arr.push(new AMap.LngLat("116.423321","39.884055"));
arr.push(new AMap.LngLat("116.473103","39.884055"));
arr.push(new AMap.LngLat("116.473103","39.919348"));
arr.push(new AMap.LngLat("116.423321","39.919348"));
var polygon = new AMap.Polygon({
map:mapObj,
strokeColor:"#0000ff",
strokeOpacity:0.2,
strokeWeight:3,
fillColor: "#f5deb3",
fillOpacity: 0.8
mapObj.plugin(["AMap.PlaceSearch"], function() { //加载PlaceSearch服务插件
MSearch = new AMap.PlaceSearch({
pageSize: 8
}); //构造地点查询类
AMap.event.addListener(MSearch, "complete", Search_CallBack); //查询成功时的回调函数
MSearch.searchInBounds("酒店", new AMap.Bounds(arr[0], arr[2])); //范围查询
6、道路查询（交叉口）
如果要查询北京的101国道，需要传参数&101&和&北京&。
//道路交叉口
function roadCrossSearchByRoadName(){
var roadname = '101';
var city2 = '北京';
var RoadSearchOption = {
number:10,//每页数量,默认10
batch:1,//请求页数，默认1
ext:""//扩展字段
var road = new AMap.RoadSearch(RoadSearchOption);
road.roadCrossSearchByRoadName(roadname,city2,roadCrossSearch_CallBack);
7、自有数据检索（不需要数据库）
检索自有数据，是我的最爱。其实就是使用云图就好了。
登录云图管理台：
批量导入自有数据，或者手工添加自有数据。
点击预览，即可获得自己的地图！比如这样的：
显示云图层，需要获得自己的tableID：
//叠加云数据图层
function addCloudLayer() {
clearMap();
//加载云图层插件
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
cloudDataLayer = new AMap.CloudDataLayer('533ccc56e4b08ebff7d539eb', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
更多详细教程，可以查看：
《东莞酒店云图》：
《贪官罗马图》：
《三甲医院云图》：
通过云图的云检索功能，检索出自有数据中的&酒店&。并用图片为A-H的标注进行标示。
function cloudSearch(){
var arr = new Array();
var searchOptions = {
keywords:'酒店',
orderBy:'_id:ASC'
//加载CloudDataSearch服务插件
mapObj.plugin(["AMap.CloudDataSearch"], function() {
search = new AMap.CloudDataSearch('b1', searchOptions); //构造云数据检索类
AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数
AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数
search.searchNearBy(yunPoint, 10000); //周边检索
检索成功的回调函数：
function cloudSearch_CallBack(data) {
var resultStr="";
var resultArr = data.
var resultNum = resultArr.
for (var i = 0; i & resultN i++) {
resultStr += "&div id='divid" + (i+1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i+1) + ",this)' style=\"font-size: 12cursor:padding:2px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&&table&&tr&&td&&h3&&font face=\"微软雅黑\"color=\"#3366FF\"&" + (i+1) + "." + resultArr[i]._name + "&/font&&/h3&";
resultStr += '地址：' + resultArr[i]._address + '&br/&类型：' + resultArr[i].type + '&br/&ID：' + resultArr[i]._id + "&/td&&/tr&&/table&&/div&";
addmarker(i, resultArr[i]);
mapObj.setFitView();
document.getElementById("result").innerHTML = resultS
添加Marker：
//添加marker&infowindow
function addmarker(i, d) {
if(d.location){
lngX = d.location.getLng();
latY = d.location.getLat();
lngX = d._location.getLng();
latY = d._location.getLat();
if(d.name){
iName = d.
iName = d._
if(d.name){
iAddress = d.
iAddress = d._
var markerOption = {
map:mapObj,
icon:"/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 Window({
content:"&h3&&font color=\"#00a6ac\"&" + (i + 1) + ". " + iName + "&/font&&/h3&" + TipContents(d.type, iAddress, 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);
全部源代码：
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&地图服务&/title&
&link rel="stylesheet" type="text/css" href="zero.css" /&
&script language="javascript" src="/maps?v=1.2&key=caaa086bdf5666322fba3baf5a6a2c03"&&/script&
&body onLoad="mapInit()"&
&div id="iCenter"&&/div&
&div id="iControlbox"&
&button onclick="javascript:addCloudLayer();"&云图&/button&
&button onclick="javascript:cloudSearch();"&检索自有酒店数据&/button&
&button onclick="javascript:clearCloud();"&清空云图&/button&
&div id="result"&&/div&
&script language="javascript"&
var marker = new Array();
var windowsArr = new Array();
var cloudDataL
//初始化地图对象，加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{
center:new AMap.LngLat(116.397428,39.90923), //地图中心点
//地图显示的比例尺级别
AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
//鼠标点击，获取经纬度坐标
function getLnglat(e){
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("lnglats").innerHTML = x + "," +
function clearCloud(){
cloudDataLayer.setMap(null);
mapObj.clearMap();
document.getElementById("result").innerHTML = '&';
//添加marker&infowindow
function addmarker(i, d) {
if(d.location){
lngX = d.location.getLng();
latY = d.location.getLat();
lngX = d._location.getLng();
latY = d._location.getLat();
if(d.name){
iName = d.
iName = d._
if(d.name){
iAddress = d.
iAddress = d._
var markerOption = {
map:mapObj,
icon:"/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 Window({
content:"&h3&&font color=\"#00a6ac\"&" + (i + 1) + ". " + iName + "&/font&&/h3&" + TipContents(d.type, iAddress, 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 Search_CallBack(data) {
var resultStr = "";
var poiArr = data.poiList.
var resultCount = poiArr.
for (var i = 0; i & resultC i++) {
resultStr += "&div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12cursor:padding:0px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&&table&&tr&&td&&img src=\"/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 = resultS
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 /&&&类型：" +
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 openMarkerTipById(pointid, thiss) {
//根据id打开搜索结果点tip
thiss.style.background = '#CAE1FF';
//输入提示框鼠标移出时的样式
function onmouseout_MarkerStyle(pointid, thiss) {
//鼠标移开后点样式恢复
thiss.style.background = "";
var yunPoint = new AMap.LngLat(120.169144,30.293164);
//叠加云数据图层
function addCloudLayer() {
mapObj.setZoomAndCenter(14,yunPoint);
//加载云图层插件
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
cloudDataLayer = new AMap.CloudDataLayer('b1', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
AMap.event.addListener(cloudDataLayer, 'click', function (result) {
var clouddata = result.
var infoWindowYun = new Window({
content:"&h3&&font face=\"微软雅黑\"color=\"#3366FF\"&"+ clouddata._name +"&/font&&/h3&&hr /&地址："+ clouddata._address + "&br /&" + "创建时间：" + clouddata._createtime+ "&br /&" + "更新时间：" + clouddata._updatetime,
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-5)
infoWindowYun.open(mapObj, clouddata._location);
function cloudSearch(){
var arr = new Array();
var searchOptions = {
keywords:'酒店',
orderBy:'_id:ASC'
//加载CloudDataSearch服务插件
mapObj.plugin(["AMap.CloudDataSearch"], function() {
search = new AMap.CloudDataSearch('b1', searchOptions); //构造云数据检索类
AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数
AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数
search.searchNearBy(yunPoint, 10000); //周边检索
function cloudSearch_CallBack(data) {
var resultStr="";
var resultArr = data.
var resultNum = resultArr.
for (var i = 0; i & resultN i++) {
resultStr += "&div id='divid" + (i+1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i+1) + ",this)' style=\"font-size: 12cursor:padding:2px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&&table&&tr&&td&&h3&&font face=\"微软雅黑\"color=\"#3366FF\"&" + (i+1) + "." + resultArr[i]._name + "&/font&&/h3&";
resultStr += '地址：' + resultArr[i]._address + '&br/&类型：' + resultArr[i].type + '&br/&ID：' + resultArr[i]._id + "&/td&&/tr&&/table&&/div&";
addmarker(i, resultArr[i]);
mapObj.setFitView();
document.getElementById("result").innerHTML = resultS
//回调函数
function errorInfo(data) {
resultStr = ;
document.getElementById("result").innerHTML = resultS
--------------------------------------------------------------------------------------------------------
【大家还想看到什么内容，可以留言给我】
下一篇预告：
二、地址解析
1、地址解析 &2、逆地址解析
三、导航规划
1、公交导航&&2、驾车导航 &3、步行导航&
1、浏览器定位&&2、IP定位
阅读(...) 评论()　　最近由于项目中需要制作一个地图，用来选择活动地点，我就花了两天利用高德地图的javascriptAPI自制了一个地图的demo。在这了记录一下我学习的过程。
　　一、进入官网，再找到高德地图的开放平台，我是做前端的，所以使用的是。
　　地图的功能很多，使用API可以自己定制自己想要的功能。在使用前需要自己申请一个Key，引入API的时候会用到这个key。
　　二、详细看一下左边的那一列各个里面的内容，看完了基本就知道怎么回事了，它提供的javascriptAPI其实就是一个接口，调用它的相应的接口就可以得到自己需要的数据。至于怎么调用接口，里面都讲的很清楚。
　　三、我觉得最有用，上手最快的位置还是那个实例中心，里面有很多不同的例子。基本能满足各种简单需求，我把其中的三个综合了一下，就实现了我想要的基本功能。下面是完整的代码页面，复制下来保存为html就可以看到我的那个效果了。（代码后面有张截图，可以看下效果）
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&输入提示后查询&/title&
&style type="text/css"&
/************************* Just Reset Browser Default CSS : BEGIN ***************************/
background-color: #fff;
body, div, h1, h2, h3, h4, ul, li, form, input, dl, dt, dd, p {
margin: 0;
padding: 0;
font-family: "微软雅黑";
+ font-size : 14 px;
_font-size: 14px;
border: none;
clear: both;
ul, ol, li {
list-style: none;
/*清除浮动*/
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
overflow: hidden;
clear: both;
/* no ie mac \*/
* html .clearfix {
height: 1%;
* + html .clearfix {
height: 1%;
font: 12px / 1.5em 微软雅黑, Arial, Verdana, Helvetica, sans-serif;
color: #333;
button, input, select, textarea {
color: #999;
input[type="button"] {
padding: 0 5px;
color: #333;
.demo_box {
float: left;
width: 620px;
height: 500px;
/* map style */
#iCenter {
float: left;
width: 650px;
height: 500px;
margin-left: 5px;
margin-right: 10px;
border: 1px solid #F6F6F6;
#r_title {
line-height: 28px;
padding-left: 5px;
background-color: #D1EEEE;
font-weight: bold;
overflow: auto;
margin-bottom: 5px;
height: 255*/
#result .sub_result {
font-size: 12px;
cursor: pointer;
line-height: 20px;
/*padding:0px 0 4px 2*/
border-bottom: 1px solid #C1FFC1;
#result .sub_result .detail {
#result .sub_result .detail h3 {
color: #00A6AC;
color: #067EC0;
text-decoration: none;
text-decoration: underline;
color: #999;
/*** layerout stylesheet ***/
/* 修改背景URL */
div.change {
background-image: url(http://pages.//img/map/marker-h.png);
div.change div {
background-image: url(http://pages.//img/map/marker-h-l.gif);
/*** copied from demo #39 添加自定义点覆盖物 ***/
/* 定义自定义点样式 */
.markerContentStyle {
position: relative;
.markerContentStyle span {
background-color: #FFFFFF;
color: #FF1493;
width: 120px;
heigth: 80px;
border: 2px solid #D8BFD8;
FONT-FAMILY: 华文行楷;
position: absolute;
top: -10px;
left: 25px;
white-space: nowrap -webkit-border-radius : 5 px;
border-radius: 5px;
/*** copied from demo #43 添加自定义信息窗体 ***/
/* 定义自定义信息窗体样式 */
position: relative;
z-index: 100;
border: 1px solid #BCBCBC;
box-shadow: 0 0 10px #B7B6B6;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.9);
transition-duration: 0.25s;
box-shadow: 0px 0px 15px #0CF;
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
-top img:hover {
box-shadow: 0px 0px 5px #000;
font-size: 12px;
padding: 10px;
line-height: 21px;
height: 0px;
width: 100%;
clear: both;
text-align: center;
-bottom img {
position: relative;
z-index: 104;
input.inputTextStyle{
width: 400px;
height: 24px;
font-size: 16px;
margin: 5px;
padding: 2px;
display:inline;
input.btn{
color: #000000;
height: 30px;
font-size: 16px;
margin: 5px;
padding: 2px;
display:inline;
font-size: 16px;
margin: 5px 0px 5px 10px;
_padding-bottom:2px;
_margin-left: 20px;
_margin-bottom: 10px;
*padding-bottom:2px;
*margin-bottom: 10px;
display:inline;
width: auto;
overflow: auto;
*overflow:visible;
/*** -------------------------***/
&b class="b_text"&活动地点：&/b&
&input id="aim" class="inputTextStyle" type="text"/&
&input class="btn" type="button" value="在地图上选择" onclick="showMap();"/&
&div id="mapBg" style="position:display:"&
&div id="iCenter"&&/div&
&div class="demo_box"&
&b class="b_text"&请输入搜索关键字：&/b&
&input id="keyword" onkeyup="keydown();" class="inputTextStyle" type="text"/&
&div id="result1" name="result1" style="overflow: width: 95%; border: 1display:"&&/div&
&div id="r_title"&&b&查询结果:&/b&&/div&
&div id="result"&&/div&
&script language="javascript" src="/maps?v=1.3&key=608dc550daf"&&/script&
&script language="javascript"&
//地图对象
var lnglatXY;
//当前对象坐标
//当前对象地址
var geocoderMarker =
//逆编码跟随鼠标移动视图
var searchMarker = [];
//搜索结果信息标记
var windowsArr = [];
//搜索结果地图信息
var addressArr = [];
//搜索结果地址集合
function showMap(){
//显示地图
var self = this;
var mapEle = document.getElementById("mapBg");
mapEle.style.display = "block";
self.mapInit();
function makeSure(){
//点击确认
var self = this;
var aim = document.getElementById("aim");
aim.value = aimAddress || "";
function mapInit() {
//创建地图并绑定监听事件
var self = this;
mapObj = new AMap.Map("iCenter", {
view: new AMap.View2D({
//center:new AMap.LngLat(116..90923),//地图中心点
zoom: 12 //地图显示的缩放级别
var listener = AMap.event.addListener(mapObj, "click", function (e) {
mapObj.clearMap();
// 清楚所有覆盖物
lnglatXY = e.
var listenMarker = new AMap.Marker({
map: mapObj,
position: e.lnglat,
icon: "/images/0.png",
offset: new AMap.Pixel(-10, -34)
mapObj.setCenter(lnglatXY);
self.geocoder();
function geocoder() {
//通过坐标找到具体地址
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function () {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
//逆地理编码
MGeocoder.getAddress(lnglatXY);
var marker = new AMap.Marker({
map: mapObj,
icon: new AMap.Icon({
image: "/Public/images/js/mark.png",
size: new AMap.Size(58, 30),
imageOffset: new AMap.Pixel(-32, -0)
position: lnglatXY,
offset: new AMap.Pixel(-5, -30)
mapObj.setFitView();
//鼠标划过显示相应点
function onMouseOver(e) {
var coor = e.split(',');
var lnglat = new AMap.LngLat(coor[0], coor[1]);
if (!geocoderMarker) {
geocoderMarker = new AMap.Marker({
map: mapObj,
icon: "/images/0.png",
position: lnglat,
offset: new AMap.Pixel(-10, -34)
geocoderMarker.setPosition(lnglat);
mapObj.setFitView();
//回调函数
function geocoder_CallBack(data) {
geocoderMarker =
var resultStr = "";
var roadinfo = "";
var poiinfo = "";
//返回地址描述
address = data.regeocode.formattedA
aimAddress =
makeSure();
//把当前地址赋值给文本框
//返回周边道路信息
roadinfo += "&table style='width:600px'&";
for (var i = 0; i & data.regeocode.roads. i++) {
var color = (i % 2 === 0 ? '#fff' : '#eee');
roadinfo += "&tr style='background-color:" + color + "; margin:0; padding:0;'&&td&道路：" + data.regeocode.roads[i].name + "&/td&&td&方向：" + data.regeocode.roads[i].direction + "&/td&&td&距离：" + data.regeocode.roads[i].distance + "米&/td&&/tr&";
roadinfo += "&/table&";
//返回周边兴趣点信息
poiinfo += "&table style='width:600cursor:'&";
for (var j = 0; j & data.regeocode.pois. j++) {
var color = j % 2 === 0 ? '#fff' : '#eee';
poiinfo += "&tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'&&td&兴趣点：" + data.regeocode.pois[j].name + "&/td&&td&类型：" + data.regeocode.pois[j].type + "&/td&&td&距离：" + data.regeocode.pois[j].distance + "米&/td&&/tr&";
poiinfo += "&/table&";
//返回结果拼接输出
resultStr = "&div style=\"font-size: 12padding:0px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&" + "&b&地址&/b&：" + address + "&hr/&&b&周边道路信息&/b&：&br/&" + roadinfo + "&hr/&&b&周边兴趣点信息&/b&：&br/&" + poiinfo + "&/div&";
document.getElementById("result").innerHTML = resultS
//输入提示
function autoSearch() {
var keywords = document.getElementById("keyword").
//加载输入提示插件
mapObj.plugin(["AMap.Autocomplete"], function() {
var autoOptions = {
city: "" //城市，默认全国
auto = new AMap.Autocomplete(autoOptions);
//查询成功时返回查询结果
if ( keywords.length & 0) {
AMap.event.addListener(auto,"complete",autocomplete_CallBack);
auto.search(keywords);
document.getElementById("result1").style.display = "none";
//输出输入提示结果的回调函数
function autocomplete_CallBack(data) {
var resultStr = "";
var tipArr = data.
if (tipArr&&tipArr.length&0) {
for (var i = 0; i & tipArr. i++) {
resultStr += "&div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)
+ ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)
+ ",this)' style=\"font-size: 13cursor:padding:5px 5px 5px 5\"" + "data=" + tipArr[i].adcode + "&" + tipArr[i].name + "&span style='color:#C1C1C1;'&"+ tipArr[i].district + "&/span&&/div&";
resultStr = " &__& 亲,人家找不到结果!&br /&要不试试：&br /&1.请确保所有字词拼写正确&br /&2.尝试不同的关键字&br /&3.尝试更宽泛的关键字";
document.getElementById("result1").curSelect = -1;
document.getElementById("result1").tipArr = tipA
document.getElementById("result1").innerHTML = resultS
document.getElementById("result1").style.display = "block";
//输入提示框鼠标滑过时的样式
function openMarkerTipById(pointid, thiss) {
//根据id打开搜索结果点tip
thiss.style.background = '#CAE1FF';
//输入提示框鼠标移出时的样式
function onmouseout_MarkerStyle(pointid, thiss) {
//鼠标移开后点样式恢复
thiss.style.background = "";
//从输入提示框中选择关键字并查询
function selectResult(index) {
if(index&0){
if (navigator.userAgent.indexOf("MSIE") & 0) {
document.getElementById("keyword").onpropertychange = null;
document.getElementById("keyword").onfocus = focus_
//截取输入提示的关键字部分
var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/&[^&].*?&.*&\/[^&].*?&/g,"");
var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
document.getElementById("keyword").value =
document.getElementById("result1").style.display = "none";
//根据选择的输入提示关键字查询
mapObj.plugin(["AMap.PlaceSearch"], function() {
var msearch = new AMap.PlaceSearch();
//构造地点查询类
AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
msearch.setCity(cityCode);
msearch.search(text);
//关键字查询查询
//定位选择输入提示关键字
function focus_callback() {
if (navigator.userAgent.indexOf("MSIE") & 0) {
document.getElementById("keyword").onpropertychange = autoS
//输出关键字查询结果的回调函数
function placeSearch_CallBack(data) {
//清空地图上的InfoWindow和Marker
windowsArr = [];
searchMarker = [];
addressArr = [];
mapObj.clearMap();
var resultStr1 = "";
var poiArr = data.poiList.
var resultCount = poiArr.
for (var i = 0; i & resultC i++) {
addressArr[i] = poiArr[i].
resultStr1 += "&div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onclick='autoClickMap(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12cursor:padding:0px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&&table&&tr&&td&&img src=\"/images/" + (i + 1) + ".png\"&&/td&" + "&td&&h3&&font color=\"#00a6ac\"&名称: " + poiArr[i].name + "&/font&&/h3&";
resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "&/td&&/tr&&/table&&/div&";
addmarker(i, poiArr[i]);
mapObj.setFitView();
document.getElementById("result").innerHTML = resultStr1;
document.getElementById("result").style.display = "block";
function autoClickMap(pointid, thiss){
mapObj.clearMap();
lnglatXY = addressArr[pointid];
mapObj.setCenter(lnglatXY);
geocoder();
//鼠标滑过查询结果改变背景样式，根据id打开信息窗体
function openMarkerTipById1(pointid, thiss) {
thiss.style.background = '#CAE1FF';
windowsArr[pointid].open(mapObj, searchMarker[pointid]);
//添加查询结果的marker&infowindow
function addmarker(i, d) {
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:mapObj,
icon:"/images/" + (i + 1) + ".png",
position:new AMap.LngLat(lngX, latY)
var mar = new AMap.Marker(markerOption);
searchMarker.push(new AMap.LngLat(lngX, latY));
var infoWindow = new Window({
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);
//infowindow显示内容
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 /&
function keydown(event){
var key = (event||window.event).keyC
var result = document.getElementById("result1")
var cur = result.curS
if(key===40){//down
if(cur + 1 & result.childNodes.length){
if(result.childNodes[cur]){
result.childNodes[cur].style.background='';
result.curSelect=cur+1;
result.childNodes[cur+1].style.background='#CAE1FF';
document.getElementById("keyword").value = result.tipArr[cur+1].
}else if(key===38){//up
if(cur-1&=0){
if(result.childNodes[cur]){
result.childNodes[cur].style.background='';
result.curSelect=cur-1;
result.childNodes[cur-1].style.background='#CAE1FF';
document.getElementById("keyword").value = result.tipArr[cur-1].
}else if(key === 13){
var res = document.getElementById("result1");
if(res && res['curSelect'] !== -1){
selectResult(document.getElementById("result1").curSelect);
autoSearch();
阅读(...) 评论()