点击地图获取经纬度（基于腾旭地图api）
废话不多说上图
接着代码段（注意：这里的key要换成自己的key）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>腾讯地图开放API - 轻快小巧,简单易用!title>
<link rel="stylesheet" href="common.css">
<script src="jquery-1.9.1.min.js">script>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-ui-1.10.4.min.js">script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp">script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#main {
height: 553px;
width: 912px;
border: 1px solid #5688CB;
border-top: 0px;
}
#tooles {
height: 23px;
background: #5688CB;
position: relative;
z-index: 100;
color:white;
}
#bside_left {
width: 260px;
height: 510px;
padding: 10px 0px 10px 10px;
float: left;
overflow: auto;
}
#cur_city, #no_value {
height: 20px;
position: absolute;
top: 3px;
left: 10px;
}
#cur_city .change_city {
margin-left: 5px;
cursor: pointer;
}
#level {
margin-left: 20px;
}
.logo_img {
width: 172px;
height: 23px;
}
.search {
width: 280px;
height: 53px;
padding-left: 10px;
float: left;
margin-left: 15px;
margin-right: 30px;
}
.search_t {
width: 200px;
height: 18px;
padding: 3px;
margin-top: 13px;
line-height: 20px;
}
.search_c {
width: 220px;
height: 40px;
float: left;
}
.btn, .btn_active {
width: 49px;
height: 24px;
line-height: 24px;
font-size: 14px;
float: left;
background: url(./img/btn.png);
margin-top: 14px;
text-align: center;
cursor: pointer;
}
.btn_active {
background: url(./img/btn.png) -49px 0px;
}
.poi {
width: 570px;
height: 41;
padding-top: 12px;
float: left;
position: relative;
}
.poi_note {
width: 63px;
line-height: 26px;
float: left;
}
#poi_cur {
width: 160px;
height: 22px;
margin-right: 10px;
margin-top: 3px;
line-height: 26px;
float: left;
text-align: center;
}
#addr_cur {
width: 260px;
height: 22px;
margin-right: 5px;
margin-top: 3px;
line-height: 26px;
float: left;
text-align: center;
}
.btn_copy {
width: 49px;
height: 24px;
background: url(../img/btn_cpoy.png) 0px 0px;
float: left;
}
.already {
width: 52px;
line-height: 26px;
padding-left: 5px;
float: left;
color: red;
display: none;
}
.info_list {
margin-bottom: 5px;
cleat: both;
cursor: pointer;
}
#txt_pannel {
height: 500px;
}
#city {
width: 356px;
height: 433px;
padding: 10px;
border: 2px solid #D6D6D6;
position: absolute;
left: 44px;
top: 20px;
z-index: 999;
background: #fff;
overflow: auto;
color: black;
}
#city .city_class {
font-size: 12px;
background: #fff;
}
#city .city_container {
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
}
#city .city_container_left {
width: 48px;
float: left;
}
#city .city_container_right {
width: 289px;
float: left;
}
#city .close {
width: 20px;
height: 20px;
display: inline-block;
float: right;
font-size: 20px;
font-weight: normal;
cursor: pointer;
}
#city .city_name {
line-height: 20px;
margin-left: 5px;
color: #2F82C4;
cursor: pointer;
display: inline-block;
font-size: 12px;
}
#curCity {
margin-right: 5px;
}
.hide {
display: none;
}
#bside_rgiht {
width: 631px;
height: 530px;
margin-left: 10px;
border-left: 1px solid #5688CB;
float: left;
font-size: 12px;
}
#container {
width: 621px;
height: 520px;
border: 5px solid #fff;
}
#no_value{
color:red;
position: relative;
width:200px;
}
style>
head>
<body>
<div style="width:912px;height:727px;position:relative;">
<div style="height:53px;">
<div class="search">
<div class="search_c"><input type="text" class="search_t" onKeyPress="if(event.keyCode==13) {btnSearch.click();return false;}"/>div>
<div id="btn_search" class="btn">搜索div>
div>
<div class="poi">
<div class="poi_note">当前坐标：div>
<input type="text" id="poi_cur" />
<div class="poi_note">当前地址：div>
<input type="text" id="addr_cur" />
div>
div>
<div id="main">
<div id="tooles">
<div id="cur_city">
<strong>北京市strong><span class="change_city">[<span style="text-decoration:underline;">更换城市span>]<span id="level">当前缩放等级：10span>span>
<div id="city" class="hide">
<h3 class="city_class">热门城市<span class="close">Xspan>h3>
<div class="city_container">
<span class="city_name">北京span>
<span class="city_name">深圳span>
<span class="city_name">上海span>
<span class="city_name">香港span>
<span class="city_name">澳门span>
<span class="city_name">广州span>
<span class="city_name">天津span>
<span class="city_name">重庆span>
<span class="city_name">杭州span>
<span class="city_name">成都span>
<span class="city_name">武汉span>
<span class="city_name">青岛span>
div>
<h3 class="city_class">全国城市h3>
<div class="city_container">
<div class="city_container_left">直辖市div>
<div class="city_container_right">
<span class="city_name">北京span>
<span class="city_name">上海span>
<span class="city_name">天津span>
<span class="city_name">重庆span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">内蒙古span>div>
<div class="city_container_right">
<span class="city_name">呼和浩特span>
<span class="city_name">包头span>
<span class="city_name">乌海span>
<span class="city_name">赤峰span>
<span class="city_name">通辽span>
<span class="city_name">鄂尔多斯span>
<span class="city_name">呼伦贝尔span>
<span class="city_name">巴彦淖尔span>
<span class="city_name">乌兰察布span>
<span class="city_name">兴安盟span>
<span class="city_name">锡林郭勒盟span>
<span class="city_name">阿拉善盟span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">山西span>div>
<div class="city_container_right">
<span class="city_name">太原span>
<span class="city_name">大同span>
<span class="city_name">阳泉span>
<span class="city_name">长治span>
<span class="city_name">晋城span>
<span class="city_name">朔州span>
<span class="city_name">晋中span>
<span class="city_name">运城span>
<span class="city_name">忻州span>
<span class="city_name">临汾span>
<span class="city_name">吕梁span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">陕西span>div>
<div class="city_container_right">
<span class="city_name">西安span>
<span class="city_name">铜川span>
<span class="city_name">宝鸡span>
<span class="city_name">咸阳span>
<span class="city_name">渭南span>
<span class="city_name">延安span>
<span class="city_name">汉中span>
<span class="city_name">榆林span>
<span class="city_name">安康span>
<span class="city_name">商洛span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">河北span>div>
<div class="city_container_right">
<span class="city_name">石家庄span>
<span class="city_name">唐山span>
<span class="city_name">秦皇岛span>
<span class="city_name">邯郸span>
<span class="city_name">邢台span>
<span class="city_name">保定span>
<span class="city_name">张家口span>
<span class="city_name">承德span>
<span class="city_name">沧州span>
<span class="city_name">廊坊span>
<span class="city_name">衡水span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">辽宁span>div>
<div class="city_container_right">
<span class="city_name">沈阳span>
<span class="city_name">大连span>
<span class="city_name">鞍山span>
<span class="city_name">抚顺span>
<span class="city_name">本溪span>
<span class="city_name">丹东span>
<span class="city_name">锦州span>
<span class="city_name">营口span>
<span class="city_name">阜新span>
<span class="city_name">辽阳span>
<span class="city_name">盘锦span>
<span class="city_name">铁岭span>
<span class="city_name">朝阳span>
<span class="city_name">葫芦岛span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">吉林span>div>
<div class="city_container_right">
<span class="city_name">长春span>
<span class="city_name">吉林span>
<span class="city_name">四平span>
<span class="city_name">辽源span>
<span class="city_name">通化span>
<span class="city_name">白山span>
<span class="city_name">松原span>
<span class="city_name">白城span>
<span class="city_name">延边span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">黑龙江span>div>
<div class="city_container_right">
<span class="city_name">哈尔滨span>
<span class="city_name">齐齐哈尔span>
<span class="city_name">鸡西span>
<span class="city_name">鹤岗span>
<span class="city_name">双鸭山span>
<span class="city_name">大庆span>
<span class="city_name">伊春span>
<span class="city_name">牡丹江span>
<span class="city_name">佳木斯span>
<span class="city_name">七台河span>
<span class="city_name">黑河span>
<span class="city_name">绥化span>
<span class="city_name">大兴安岭span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">江苏span>div>
<div class="city_container_right">
<span class="city_name">南京span>
<span class="city_name">无锡span>
<span class="city_name">徐州span>
<span class="city_name">常州span>
<span class="city_name">苏州span>
<span class="city_name">南通span>
<span class="city_name">连云港span>
<span class="city_name">淮安span>
<span class="city_name">盐城span>
<span class="city_name">扬州span>
<span class="city_name">镇江span>
<span class="city_name">泰州span>
<span class="city_name">宿迁span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">安徽span>div>
<div class="city_container_right">
<span class="city_name">合肥span>
<span class="city_name">蚌埠span>
<span class="city_name">芜湖span>
<span class="city_name">淮南span>
<span class="city_name">马鞍山span>
<span class="city_name">淮北span>
<span class="city_name">铜陵span>
<span class="city_name">安庆span>
<span class="city_name">黄山span>
<span class="city_name">阜阳span>
<span class="city_name">宿州span>
<span class="city_name">滁州span>
<span class="city_name">六安span>
<span class="city_name">宣城span>
<span class="city_name">池州span>
<span class="city_name">亳州span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">山东span>div>
<div class="city_container_right">
<span class="city_name">济南span>
<span class="city_name">青岛span>
<span class="city_name">淄博span>
<span class="city_name">枣庄span>
<span class="city_name">东营span>
<span class="city_name">潍坊span>
<span class="city_name">烟台span>
<span class="city_name">威海span>
<span class="city_name">济宁span>
<span class="city_name">泰安span>
<span class="city_name">日照span>
<span class="city_name">莱芜span>
<span class="city_name">临沂span>
<span class="city_name">德州span>
<span class="city_name">聊城span>
<span class="city_name">滨州span>
<span class="city_name">菏泽span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">浙江span>div>
<div class="city_container_right">
<span class="city_name">杭州span>
<span class="city_name">宁波span>
<span class="city_name">温州span>
<span class="city_name">嘉兴span>
<span class="city_name">绍兴span>
<span class="city_name">金华span>
<span class="city_name">衢州span>
<span class="city_name">舟山span>
<span class="city_name">台州span>
<span class="city_name">丽水span>
<span class="city_name">湖州span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">江西span>div>
<div class="city_container_right">
<span class="city_name">南昌span>
<span class="city_name">景德镇span>
<span class="city_name">萍乡span>
<span class="city_name">九江span>
<span class="city_name">新余span>
<span class="city_name">鹰潭span>
<span class="city_name">赣州span>
<span class="city_name">吉安span>
<span class="city_name">宜春span>
<span class="city_name">抚州span>
<span class="city_name">上饶span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">福建span>div>
<div class="city_container_right">
<span class="city_name">福州span>
<span class="city_name">厦门span>
<span class="city_name">莆田span>
<span class="city_name">三明span>
<span class="city_name">泉州span>
<span class="city_name">漳州span>
<span class="city_name">南平span>
<span class="city_name">龙岩span>
<span class="city_name">宁德span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">湖南span>div>
<div class="city_container_right">
<span class="city_name">长沙span>
<span class="city_name">株洲span>
<span class="city_name">湘潭span>
<span class="city_name">衡阳span>
<span class="city_name">邵阳span>
<span class="city_name">岳阳span>
<span class="city_name">常德span>
<span class="city_name">张家界span>
<span class="city_name">益阳span>
<span class="city_name">郴州span>
<span class="city_name">永州span>
<span class="city_name">怀化span>
<span class="city_name">娄底span>
<span class="city_name">湘西span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">湖北span>div>
<div class="city_container_right">
<span class="city_name">武汉span>
<span class="city_name">黄石span>
<span class="city_name">襄樊span>
<span class="city_name">十堰span>
<span class="city_name">宜昌span>
<span class="city_name">荆门span>
<span class="city_name">鄂州span>
<span class="city_name">孝感span>
<span class="city_name">荆州span>
<span class="city_name">黄冈span>
<span class="city_name">咸宁span>
<span class="city_name">随州span>
<span class="city_name">恩施span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">河南span>div>
<div class="city_container_right">
<span class="city_name">郑州span>
<span class="city_name">开封span>
<span class="city_name">洛阳span>
<span class="city_name">平顶山span>
<span class="city_name">焦作span>
<span class="city_name">鹤壁span>
<span class="city_name">新乡span>
<span class="city_name">安阳span>
<span class="city_name">濮阳span>
<span class="city_name">许昌span>
<span class="city_name">漯河span>
<span class="city_name">三门峡span>
<span class="city_name">南阳span>
<span class="city_name">商丘span>
<span class="city_name">信阳span>
<span class="city_name">周口span>
<span class="city_name">驻马店span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">海南span>div>
<div class="city_container_right">
<span class="city_name">海口span>
<span class="city_name">三亚span>
<span class="city_name">三沙span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">广东span>div>
<div class="city_container_right">
<span class="city_name">广州span>
<span class="city_name">深圳span>
<span class="city_name">珠海span>
<span class="city_name">汕头span>
<span class="city_name">韶关span>
<span class="city_name">佛山span>
<span class="city_name">江门span>
<span class="city_name">湛江span>
<span class="city_name">茂名span>
<span class="city_name">东沙群岛span>
<span class="city_name">肇庆span>
<span class="city_name">惠州span>
<span class="city_name">梅州span>
<span class="city_name">汕尾span>
<span class="city_name">河源span>
<span class="city_name">阳江span>
<span class="city_name">清远span>
<span class="city_name">东莞span>
<span class="city_name">中山span>
<span class="city_name">潮州span>
<span class="city_name">揭阳span>
<span class="city_name">云浮span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">广西span>div>
<div class="city_container_right">
<span class="city_name">南宁span>
<span class="city_name">柳州span>
<span class="city_name">桂林span>
<span class="city_name">梧州span>
<span class="city_name">北海span>
<span class="city_name">防城港span>
<span class="city_name">钦州span>
<span class="city_name">贵港span>
<span class="city_name">玉林span>
<span class="city_name">百色span>
<span class="city_name">贺州span>
<span class="city_name">河池span>
<span class="city_name">来宾span>
<span class="city_name">崇左span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">贵州span>div>
<div class="city_container_right">
<span class="city_name">贵阳span>
<span class="city_name">遵义span>
<span class="city_name">安顺span>
<span class="city_name">铜仁span>
<span class="city_name">毕节span>
<span class="city_name">六盘水span>
<span class="city_name">黔西南span>
<span class="city_name">黔东南span>
<span class="city_name">黔南span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">四川span>div>
<div class="city_container_right">
<span class="city_name">成都span>
<span class="city_name">自贡span>
<span class="city_name">攀枝花span>
<span class="city_name">泸州span>
<span class="city_name">德阳span>
<span class="city_name">绵阳span>
<span class="city_name">广元span>
<span class="city_name">遂宁span>
<span class="city_name">内江span>
<span class="city_name">乐山span>
<span class="city_name">南充span>
<span class="city_name">宜宾span>
<span class="city_name">广安span>
<span class="city_name">达州span>
<span class="city_name">眉山span>
<span class="city_name">雅安span>
<span class="city_name">巴中span>
<span class="city_name">资阳span>
<span class="city_name">阿坝span>
<span class="city_name">甘孜span>
<span class="city_name">凉山span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">云南span>div>
<div class="city_container_right">
<span class="city_name">昆明span>
<span class="city_name">保山span>
<span class="city_name">昭通span>
<span class="city_name">丽江span>
<span class="city_name">普洱span>
<span class="city_name">临沧span>
<span class="city_name">曲靖span>
<span class="city_name">玉溪span>
<span class="city_name">文山span>
<span class="city_name">西双版纳span>
<span class="city_name">楚雄span>
<span class="city_name">红河span>
<span class="city_name">德宏span>
<span class="city_name">大理span>
<span class="city_name">怒江span>
<span class="city_name">迪庆span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">甘肃span>div>
<div class="city_container_right">
<span class="city_name">兰州span>
<span class="city_name">嘉峪关span>
<span class="city_name">金昌span>
<span class="city_name">白银span>
<span class="city_name">天水span>
<span class="city_name">酒泉span>
<span class="city_name">张掖span>
<span class="city_name">武威span>
<span class="city_name">定西span>
<span class="city_name">陇南span>
<span class="city_name">平凉span>
<span class="city_name">庆阳span>
<span class="city_name">临夏span>
<span class="city_name">甘南span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">宁夏span>div>
<div class="city_container_right">
<span class="city_name">银川span>
<span class="city_name">石嘴山span>
<span class="city_name">吴忠span>
<span class="city_name">固原span>
<span class="city_name">中卫span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">青海span>div>
<div class="city_container_right">
<span class="city_name">西宁span>
<span class="city_name">玉树span>
<span class="city_name">果洛span>
<span class="city_name">海东span>
<span class="city_name">海西span>
<span class="city_name">黄南span>
<span class="city_name">海北span>
<span class="city_name">海南span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">西藏span>div>
<div class="city_container_right">
<span class="city_name">拉萨span>
<span class="city_name">那曲span>
<span class="city_name">昌都span>
<span class="city_name">山南span>
<span class="city_name">日喀则span>
<span class="city_name">阿里span>
<span class="city_name">林芝span>
div>
div>
<div style="clear:both">div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">新疆span>div>
<div class="city_container_right">
<span class="city_name">乌鲁木齐span>
<span class="city_name">克拉玛依span>
<span class="city_name">吐鲁番span>
<span class="city_name">哈密span>
<span class="city_name">博尔塔拉span>
<span class="city_name">巴音郭楞span>
<span class="city_name">克孜勒苏span>
<span class="city_name">和田span>
<span class="city_name">阿克苏span>
<span class="city_name">喀什span>
<span class="city_name">塔城span>
<span class="city_name">伊犁span>
<span class="city_name">昌吉span>
<span class="city_name">阿勒泰span>
div>
div>
<div style="clear:both">div>
div>
div>
div>
<div id="bside_left">
<div id="txt_pannel">
<h3>功能简介：h3>
<p>1、支持地址 精确/模糊 查询；p>
<p>2、支持POI点坐标显示；p>
<p>3、坐标鼠标跟随显示；p>
<h3>使用说明：h3>
<p>在搜索框搜索关键词后，地图上会显示相应poi点，同时左侧显示对应该点的信息，点击某点或某信息，右上角会显示相应该点的坐标和地址。p>
div>
div>
<div id="bside_rgiht">
<div id="container">div>
div>
div>
div>
<script type="text/javascript">
var container = document.getElementById("container");
var map = new qq.maps.Map(container, {
zoom: 10
}),
label = new qq.maps.Label({
map: map,
offset: new qq.maps.Size(15,-12),
draggable: false,
clickable: false
}),
markerArray = [],
curCity = document.getElementById("cur_city"),
btnSearch = document.getElementById("btn_search"),
bside = document.getElementById("bside_left"),
url, query_city,
cityservice = new qq.maps.CityService({
complete: function (result) {
curCity.children[0].innerHTML = result.detail.name;
map.setCenter(result.detail.latLng);
}
});
cityservice.searchLocalCity();
map.setOptions({
draggableCursor: "crosshair"
});
$(container).mouseenter(function () {
label.setMap(map);
});
$(container).mouseleave(function () {
label.setMap(null);
});
qq.maps.event.addListener(map, "mousemove", function (e) {
var latlng = e.latLng;
label.setPosition(latlng);
label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));
});
//所有的key换成自己的key不然没有效果会报错
var url3;
qq.maps.event.addListener(map, "click", function (e) {
document.getElementById("poi_cur").value = e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6);
url3 = encodeURI("http://apis.map.qq.com/ws/geocoder/v1/?location=" + e.latLng.getLat() + "," + e.latLng.getLng() + "&key=K76BZ-W3O2Q-RFL5S-GXOPR-3ARIT-6KFE5&output=jsonp&&callback=?");
$.getJSON(url3, function (result) {
if(result.result!=undefined){
document.getElementById("addr_cur").value = result.result.address;
}else{
document.getElementById("addr_cur").value = "";
}
})
});
qq.maps.event.addListener(map, "zoom_changed", function () {
document.getElementById("level").innerHTML = "当前缩放等级：" + map.getZoom();
});
var listener_arr = [];
var isNoValue = false;
qq.maps.event.addDomListener(btnSearch, 'click', function () {
var value = this.parentNode.getElementsByTagName("input")[0].value;
var latlngBounds = new qq.maps.LatLngBounds();
for(var i= 0,l=listener_arr.length;i0 ;
query_city = curCity.children[0].innerHTML;
url = encodeURI("http://apis.map.qq.com/ws/place/v1/search?keyword=" + value + "&boundary=region(" + query_city + ",0)&page_size=9&page_index=1&key=K76BZ-W3O2Q-RFL5S-GXOPR-3ARIT-6KFE5&output=jsonp&&callback=?");
$.getJSON(url, function (result) {
if (result.count) {
isNoValue = false;
bside.innerHTML = "";
each(markerArray, function (n, ele) {
ele.setMap(null);
});
markerArray.length = 0;
each(result.data, function (n, ele) {
var latlng = new qq.maps.LatLng(ele.location.lat, ele.location.lng);
latlngBounds.extend(latlng);
var left = n * 27;
var marker = new qq.maps.Marker({
map: map,
position: latlng,
zIndex: 10
});
marker.index = n;
marker.isClicked = false;
setAnchor(marker, true);
markerArray.push(marker);
var listener1 = qq.maps.event.addDomListener(marker, "mouseover", function () {
var n = this.index;
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
label.setContent(this.position.getLat().toFixed(6) + "," + this.position.getLng().toFixed(6));
label.setPosition(this.position);
label.setOptions({
offset: new qq.maps.Size(15, -20)
})
});
listener_arr.push(listener1);
var listener2 = qq.maps.event.addDomListener(marker, "mouseout", function () {
var n = this.index;
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
label.setOptions({
offset: new qq.maps.Size(15, -12)
})
});
listener_arr.push(listener2);
var listener3 = qq.maps.event.addDomListener(marker, "click", function () {
var n = this.index;
setFlagClicked(markerArray, n);
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
document.getElementById("addr_cur").value = bside.childNodes[n].childNodes[1].childNodes[1].innerHTML.substring(3);
});
listener_arr.push(listener3);
map.fitBounds(latlngBounds);
var div = document.createElement("div");
div.className = "info_list";
var order = document.createElement("div");
var leftn = -54 - 17 * n;
order.style.cssText = "width:17px;height:17px;margin:3px 3px 0px 0px;float:left;background:url(./img/marker_n.png) " + leftn + "px 0px";
div.appendChild(order);
var pannel = document.createElement("div");
pannel.style.cssText = "width:200px;float:left;";
div.appendChild(pannel);
var name = document.createElement("p");
name.style.cssText = "margin:0px;color:#0000CC";
name.innerHTML = ele.title;
pannel.appendChild(name);
var address = document.createElement("p");
address.style.cssText = "margin:0px;";
address.innerHTML = "地址：" + ele.address;
pannel.appendChild(address);
if (ele.tel != undefined) {
var phone = document.createElement("p");
phone.style.cssText = "margin:0px;";
phone.innerHTML = "电话：" + ele.tel;
pannel.appendChild(phone);
}
var position = document.createElement("p");
position.style.cssText = "margin:0px;";
position.innerHTML = "坐标：" + ele.location.lat.toFixed(6) + "，" + ele.location.lng.toFixed(6);
pannel.appendChild(position);
bside.appendChild(div);
div.style.height = pannel.offsetHeight + "px";
div.isClicked = false;
div.index = n;
marker.div = div;
div.marker = marker;
});
$("#bside_left").delegate(".info_list", "mouseover", function (e) {
var n = this.index;
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
});
$("#bside_left").delegate(".info_list", "mouseout", function () {
each(markerArray, function (n, ele) {
if (!ele.isClicked) {
setAnchor(ele, true);
ele.div.style.background = "#fff";
}
})
});
$("#bside_left").delegate(".info_list", "click", function (e) {
var n = this.index;
setFlagClicked(markerArray, n);
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
map.setCenter(markerArray[n].position);
document.getElementById("addr_cur").value = this.childNodes[1].childNodes[1].innerHTML.substring(3);
});
} else {
bside.innerHTML = "";
each(markerArray, function (n, ele) {
ele.setMap(null);
});
markerArray.length = 0;
var novalue = document.createElement('div');
novalue.id = "no_value";
novalue.innerHTML = "对不起，没有搜索到您要找的结果!";
bside.appendChild(novalue);
isNoValue = true;
}
});
});
btnSearch.onmousedown = function () {
this.className = "btn_active";
};
btnSearch.onmouseup = function () {
this.className = "btn";
};
function setAnchor(marker, flag) {
var left = marker.index * 27;
if (flag == true) {
var anchor = new qq.maps.Point(10, 30),
origin = new qq.maps.Point(left, 0),
size = new qq.maps.Size(27, 33),
icon = new qq.maps.MarkerImage("./img/marker10.png", size, origin, anchor);
marker.setIcon(icon);
} else {
var anchor = new qq.maps.Point(10, 30),
origin = new qq.maps.Point(left, 35),
size = new qq.maps.Size(27, 33),
icon = new qq.maps.MarkerImage("./img/marker10.png", size, origin, anchor);
marker.setIcon(icon);
}
}
function setCurrent(arr, index, isMarker) {
if (isMarker) {
each(markerArray, function (n, ele) {
if (n == index) {
setAnchor(ele, false);
ele.setZIndex(10);
} else {
if (!ele.isClicked) {
setAnchor(ele, true);
ele.setZIndex(9);
}
}
});
} else {
each(markerArray, function (n, ele) {
if (n == index) {
ele.div.style.background = "#DBE4F2";
} else {
if (!ele.div.isClicked) {
ele.div.style.background = "#fff";
}
}
});
}
}
function setFlagClicked(arr, index) {
each(markerArray, function (n, ele) {
if (n == index) {
ele.isClicked = true;
ele.div.isClicked = true;
var str = '' + ele.div.children[1].innerHTML.toString() + '';
var latLng = ele.getPosition();
document.getElementById("poi_cur").value = latLng.getLat().toFixed(6) + "," + latLng.getLng().toFixed(6);
} else {
ele.isClicked = false;
ele.div.isClicked = false;
}
});
}
var city = document.getElementById("city");
curCity.onclick = function (e) {
var e = e || window.event,
target = e.target || e.srcElement;
if (target.innerHTML == "更换城市") {
city.style.display = "block";
if(isNoValue){
bside.innerHTML = "";
each(markerArray, function (n, ele) {
ele.setMap(null);
});
markerArray.length = 0;
}
}
};
var url2;
city.onclick = function (e) {
var e = e || window.event,
target = e.target || e.srcElement;
if (target.className == "close") {
city.style.display = "none";
}
if (target.className == "city_name") {
curCity.children[0].innerHTML = target.innerHTML;
url2 = encodeURI("http://apis.map.qq.com/ws/geocoder/v1/?region=" + curCity.children[0].innerHTML + "&address=" + curCity.children[0].innerHTML + "&key=K76BZ-W3O2Q-RFL5S-GXOPR-3ARIT-6KFE5&output=jsonp&&callback=?");
$.getJSON(url2, function (result) {
map.setCenter(new qq.maps.LatLng(result.result.location.lat, result.result.location.lng));
map.setZoom(10);
});
city.style.display = "none";
}
};
var url4;
$(".search_t").autocomplete({
source:function(request,response){
url4 = encodeURI("http://apis.map.qq.com/ws/place/v1/suggestion/?keyword=" + request.term + "®ion=" + curCity.children[0].innerHTML + "&key=K76BZ-W3O2Q-RFL5S-GXOPR-3ARIT-6KFE5&output=jsonp&&callback=?");
$.getJSON(url4,function(result){
response($.map(result.data,function(item){
return({
label:item.title
})
}));
});
}
});
function each(obj, fn) {
for (var n = 0, l = obj.length; n < l; n++) {
fn.call(obj[n], n, obj[n]);
}
}
script>
body>
html>