js怎么设置vue amap的高德key地图的amap.autocomplete提示框

标签:至少1个,最多5个
摘要:地图服务,大家能想到哪些?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 = 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);
原文链接:
0 收藏&&|&&0
你可能感兴趣的文章
41 收藏,47.9k
5 收藏,6.4k
1 收藏,437
分享到微博?
技术专栏,帮你记录编程中的点滴,提升你对技术的理解收藏感兴趣的文章,丰富自己的知识库
明天提醒我
我要该,理由是:1月16日,高德地图在京召开春节“平安福计划”发布会,针对2017年春运推出“安全地图”及“春运路况先知系统”,发布春节出行预测报告,并披露了2016年全年产品成绩。&&去年日活用户增长123%&高德...
高德、百度地图两大互联网地图商,最近几天接连发布了对地图发展趋势的预判,暗暗和对方较劲。高德将未来地图竞争关键词定义为“活地图”。12月27日,高德地图技术副总裁于志杰透露,基于自主采集能力的进化、大数...
互联网地图内容、导航和位置服务提供商高德地图正式发布了新一代智能车载导航——高德地图车机版(AMAP AUTO)2.0。这是今年9月高德宣布推出AI引擎后,高德汽车事业部基于该引擎推出的全新车载导航产品。产品升级...
高德地图日前联合交通运输部科学研究院、清华大学戴姆勒可持续交通研究中心、阿里云、清华同衡规划设计研究院等权威机构正式发布了《2016年第三季度中国主要城市交通分析报告》。报告显示,与去年同期相比,46个主...
12345678910
12345678910
盖世行业工具地图服务,大家能想到哪些?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..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 = 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..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 = 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
学到新知识了?快来2014高德LBS应用大赛操练起来吧!
本文已收录于以下专栏:
相关文章推荐
接触高德地图也有一段时间了。但是也有很长一段时间没用了,手生了。闲来无事就再写写地图。好在高德的文档做的很详实,使用起来得心应手。今天就写了一点关于显示/定位/POI搜索/大头针/气泡的简单代码。
覆盖物,是一张地图的灵魂。有覆盖物的地图,才是完整的地图。在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了。覆盖物有多种,包括,标注、折线、多...
先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别?
1、路线规划,指的是为用户提供3条路线推荐。【高德】在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没...
摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case。我们还提供,如何将基站cell_id转换为GPS坐标?
-----------------------------------...
无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口。除了官方通用的鱼骨、鹰眼控件,还有大量官方开发的地图插件,类似谷歌的l...
api官网链接:
/Javascript/example#
/Javascript/plugin_detail/id...
高德js_API开发O2O项目服务端地图定位抢单
摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case。我们还提供,如何将基站cell_id转换为GPS坐标?
-------------------------------------...
他的最新文章
讲师:姜飞俊
讲师:汪木铃
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)

我要回帖

更多关于 amap.autocomplete 的文章

 

随机推荐