标签：至少1个，最多5个
摘要：关于地图的显示，我想大家最关心的就是麻点图，自定义底图的解决方案了吧。在过去，marker大于500之后，浏览器开始逐渐卡死，大家都开始寻找解决方案，比如聚合marker啊，比如麻点图啊。聚合marker里面还有一些复杂的算法，而麻点图，最让大家头疼的，就是如何生成麻点图，如何切图，如何把图片贴到地图上，还有如何定位图片的位置吧。以前那么复杂的一系列操作，居然让云图的可视化操作一下子解决了。现在只要点一点鼠标，麻点图就自动生成了。真是广大LBS开发者的福音。
以前写过从零开始学百度地图API系列，写得比较浅显。如今，自己在LBS领域成长了几年，学到比较多的专业知识，所以此次再次写到”从零系列”，希望加上更多功能，更多想法。比如这期的地图展现，不单单只是告诉大家，一张2D地图如何用代码写出来，同时，还会加上3D地图，卫星图，街景，交通流量图，麻点图，仙剑奇侠传地图等。也希望借此可以和大家更多的交流。
一、万物的首先第一步，当然是申请一个key。
登录之后，点新建地图，就有一个自动的key了。
key在右上角密钥管理处
二、 2D地图
2D地图，就是一张普通的高德地图。只需要简单几句话就可以实现。
var point = new AMap.LngLat(120..290422);
function mapInit(){
//初始化地图对象，加载地图。
mapObj = new AMap.Map("iCenter",{
center : point, //地图中心点
level : 15
//地图显示的缩放级别
其中，level指的是地图级别，默认为[3,18]。3为世界地图，18为街道级地图。
center指的是地图的中心点，可以用坐标拾取工具来取点。坐标拾取工具：
2D效果图：
三、实时路况
添加实时路况，只需要两句话
var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
trafficLayer.setMap(mapObj);
//添加实时路况图层
消除实时路况有2种方法，一是隐藏hide方法，二是重置地图setMap(null)
trafficLayer.setMap(null);
//隐藏实时路况图层
trafficLayer.hide();
//隐藏实时路况图层
实时路况效果：
四、路网，卫星图
路网、卫星图，都跟实时路况路况差不多，只是换了个类名。
添加路网、卫星图，只需要两句话
var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //实例化路网图层
roadNetLayer.setMap(mapObj); //在map中添加路网图层
var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //实例化卫星图
satellLayer.setMap(mapObj); //在map中添加卫星图
消除路网、卫星图，有2种方法，一是隐藏hide方法，二是重置地图setMap(null)
roadNetLayer.setMap(null); //隐藏路网
roadNetLayer.hide(); //隐藏路网
satellLayer.setMap(null);
//隐藏卫星图
satellLayer.hide();
//隐藏卫星图
路网、卫星图效果：
五、3D地图
3D地图，是在地图比较详细的级别17-18的时候，有三维楼块效果的地图。
所以，要看到3D效果，必须把地图级别调整到17-18才可以看到。
var buildingLayer = new AMap.Buildings(); //实例化3D地图图层
buildingLayer.setMap(mapObj); //在map中添加3D图层
mapObj.setZoom(18); //改变地图级别到17-18
3D地图没有hide方法，所以隐藏他，需要重置地图。
buildingLayer.setMap(null);
3D地图效果：
六、麻点图
（记得以前研究百度地图API的时候，麻点图的制作很苦难，要自己去对准坐标，自己生成麻点图，然后自己切片……实在费力……）
高德地图API最好用的就是麻点图。不用自己生成麻点图，不用自己切图。只需要在云图上点一点，就可以完成所有操作。
打开云图管理台：
新建或打开已有的地图：
点右上角的按钮，可以手工一个一个标注你自己的麻点。
当然也可以批量导入你的数据。
数据填充完毕后，记录下你的tableid。这就是你的云图层（麻点图）的id，放到下面的代码里。
//加载云图层插件
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
var cloudDataLayer = new AMap.CloudDataLayer('【您的tableid】', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
云图层，就是麻点图，是实时渲染的，你在云图管理台操作之后，立马在你的前台得到显示。
这真是我用过最好用的麻点图了。marker大于500之后，终于有如此方便的解决方案了。
更多关于云图的教程，可以看我以前发过的教程
三甲医院例子：
东莞酒店例子：
七、仙剑地图
这个算是投机取巧，将仙剑地图直接覆盖在高德地图上，属于图片覆盖物。
图片覆盖物需要指定一个显示范围，取左下角和右上角。
显示范围设定后，不管地图放大缩小，图片都只在这个范围中显示。
这样的图片覆盖物，比较适合制作校园地图，厂区地图，小区地图等。
而且，跟云图一样，图片覆盖物不需要切图。
（又想感叹一句！真真是开发者的福音！为何高德API做得那么好，之前我都不知道！！）
var bounds = new AMap.Bounds(new AMap.LngLat(120..271596), new AMap.LngLat(120..309171)),
groundImageOpts = {
opacity: 1,
//图片透明度
clickable: true,//图片相应鼠标点击事件，默认：false
map: mapObj
//图片叠加的地图对象
//实例化一个图片覆盖物对象
var groundImage = new AMap.GroundImage('xianjian.jpg', bounds, groundImageOpts);
仙剑地图效果：
八、自定义地图
这里用谷歌的底图作为例子，将高德底图直接换为谷歌底图。跟上一段的内容不一样，不是图片覆盖物那么简单哦。
高德的切图方式，和谷歌的一样。所以，在网上找的谷歌地图的切图工具，都可以适用于高德地图。
google = new AMap.TileLayer({
tileUrl:"http://mt{1,2,3,0}./vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil"//图块取图地址
google.setMap(mapObj);
谷歌地图：
高德地图街景覆盖城市共33个，分别为：杭州，南京，成都，西安，拉萨，昆明，烟台，沈阳，哈尔滨，长春，常州，南通，林芝，泰安，日照，那曲，东营，日喀则，德州，滨州，聊城，莱芜，郑州，洛阳，平顶山，开封，安阳，信阳，新乡，焦作，商丘，周口，驻马店。
使用街景，必须将您的网页文件传到服务器上。
var opts = {
heading:270,
position: point
var panorama = new AMap.Panorama('iCenter',opts);
position，就是街景的位置，必须在33个城市有街景的范围内，才能看到街景哦。
可以先到amap上看一眼，哪里有街景，然后再设置您的街景位置。高德地图
街景效果：
十、全部源代码，请点击这里：
示例demo在线看：
【部分代码和图片丢失，请看原文】
3 收藏&&|&&5
你可能感兴趣的文章
2 收藏，153
13 收藏，268
40 收藏，46.4k
好炫啊，最近正用地图呢
正在学习中
分享到微博？
技术专栏，帮你记录编程中的点滴，提升你对技术的理解收藏感兴趣的文章，丰富自己的知识库
明天提醒我
我要该，理由是：Pages: 1/2
主题 : 高德地图缩放显示问题
级别: 圣骑士
UID: 533249
可可豆: 2459 CB
威望: 1697 点
在线时间: 480(时)
发自: Web Page
来源于&&分类
高德地图缩放显示问题&&&
高德地图如何设置显示范围，现在大头针位置默认是中国，需要一直点击缩放才能到具体地点，急求方法！
图片:Simulator Screen Shot 日 下午3.07.39.png
级别: 圣骑士
UID: 533249
可可豆: 2459 CB
威望: 1697 点
在线时间: 480(时)
发自: Web Page
自己顶，求方法
级别: 侠客
可可豆: 150 CB
威望: 150 点
在线时间: 465(时)
发自: Web Page
可以调用一下 高德地图的协议方法 /** *&&设置地图使其可以显示数组中所有的annotation, 如果数组中只有一个则直接设置地图中心为annotation的位置。 * *&&@param annotations 需要显示的annotation *&&@param insets&&&&&&insets 嵌入边界 *&&@param animated&&&&是否执行动画 */- (void)showAnnotations:(NSArray *)annotations edgePadding:(UIEdgeInsets)insets animated:(BOOL)
级别: 圣骑士
UID: 533249
可可豆: 2459 CB
威望: 1697 点
在线时间: 480(时)
发自: Web Page
回 2楼(飞雪酷酷) 的帖子
这个好像没起作用，设置了还是不行&&现在就一个大头针，大头针居中显示了，但是范围还是没有改变
级别: 侠客
可可豆: 150 CB
威望: 150 点
在线时间: 465(时)
发自: Web Page
那你就进来的时候 直接开启定位 走个定位的回调
级别: 侠客
UID: 511451
可可豆: 1369 CB
威望: 902 点
在线时间: 1321(时)
发自: Web Page
[_mapView setZoomLevel:16.1 animated:YES]这个方法设置缩放级别的
级别: 圣骑士
UID: 533249
可可豆: 2459 CB
威望: 1697 点
在线时间: 480(时)
发自: Web Page
回 5楼(kikao) 的帖子
这个参数我设置了但是一点作用没都有，之前我用过这个参数是可以的，现在不知道为啥不行了，难道是新版本的问题吗？
级别: 新手上路
可可豆: 13 CB
威望: 13 点
在线时间: 52(时)
发自: Web Page
请问楼主解决了嘛？ 我也是这个问题&&，&&高德地图SDK更新之后 以前的办法就不好用了。
级别: 侠客
UID: 534139
可可豆: 613 CB
威望: 437 点
在线时间: 590(时)
发自: Web Page
回 楼主(yangTaoCocos) 的帖子
试试这个方法&&[self.mapView setZoomLevel:18 atPivot:self.center animated:YES];注意第二个参数设置成屏幕center的前提是&&你的Annotation在屏幕中心
级别: 圣骑士
UID: 533249
可可豆: 2459 CB
威望: 1697 点
在线时间: 480(时)
发自: Web Page
回 7楼(ItLikeyi) 的帖子
现在已经可以了，我是在viewDidLoad里面调用了[_mapView setZoomLevel:16.1 animated:YES]这个方法是可以的
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版使用百度地图API月度总结(夹杂和高德地图API的对比) - 简书
使用百度地图API月度总结(夹杂和高德地图API的对比)
用了百度地图API一个月，是时候总结(pen)一波了！
1、初始化百度地图的时候，必须要传你要定位的地点，否则根本不能初始化！而高德地图只需要传一个zoom，就可以初始化，而且会根据目前用户的位置自！动！定！位！很多项目需求其实就是根据用户当前位置自动定位，如果百度地图要实现自动定位功能，还要调用LocalCity()方法来获取用户当前位置，然后传入地图实例中，光这个就多了好几行代码。。。2、由于项目需求，需要实例化两张百度地图，通过一个切换按钮实现两张地图的相互切换，然后出现了有一张不能显示完全的bug，心累。。。看下图吧切换前
猜测可能是两张地图实例化时序冲突，手动延迟了百度地图实例化时序，果然正常。。。然而同样的代码换成了高德地图，屁！事！儿！没！有！-------附上百度官方解答：http://bbs./forum.phpmod=viewthread&tid=85165&extra=page%3D13、百度地图的label文本标注，由于和bootstrap框架冲突，导致宽度不可设置，解决方法：设置label的style属性max-width:none，高德地图不知道有没有这个bug，没测4、还是百度地图label文本标注问题！当百度地图缩放及移动时，label会！消！失！还好这个问题在网上早就有人总结(pen)过，也给出了解决方法：只要在缩放及移动前将当前label储存起来，在缩放及移动后再把之前储存的label设置回去就可以了，具体原因可自行百度。一般是在百度地图的removeOverlay事件之前储存，后来测试发现moving和zoomend事件也可以5、这点其实直接观测百度地图DOM节点也能知道，百度地图左下角的‘百度地图’logo的官方class值是BMap_cpyCtrl和anchorBL，然后就可以动！他！了！6、百度全景图功能，这个必须要赞一下，因为高德API目前还没有全景图接口。但！是！还是坑了我一下午，并不是所有的定位点都有全景图，这个表示理解，没有全景图的定位点全景图区域会显示空白，那！是！有！前！提！的！如果是通过直接更换定位点的方式实现的切换全景图，当切换到没有全景图的定位点的时候，全景图区域会显示上！一！张！全！景！图！除非你没有上一张全景图，那就是正常的。因此切换全景图不能仅仅是更换定位点，而是要重新实例化全景图对象，且切换后调用hide()方法，那么这时如果切换后的定位点没有全景图，那显示全景图区域就是空白的7、百度地图坐标批量转换API，官方文档说一次能转换100个点，实测一次只能转换10个点！
文能奋笔疾书千行代码，武能抡起键盘就是干！　　最近由于项目中需要制作一个地图，用来选择活动地点，我就花了两天利用高德地图的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();
阅读(...) 评论()