今天整理一个高德地图的小demo，下面的图是我实现的效果

20190326_151321.gif

我要的这个效果，既用到了web服务与web端的高德服务，需要先从高德地图的开发平台创建自己的应用，并增加相应的key。

//引入js文件

//html

//js

function addMap(){

$("#hid_map").show();

$('#tipinput').val('');

//地图加载

var map = new AMap.Map("container", {

resizeEnable: true

});

//输入提示

var autoOptions = {

input: "tipinput"

};

var auto = new AMap.Autocomplete(autoOptions);

var placeSearch = new AMap.PlaceSearch({

map: map

}); //构造地点查询类

AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

function select(e) {

AMap.event.addListener(placeSearch, "markerClick",markerClick_CallBack);

placeSearch.setCity(e.poi.adcode);

placeSearch.search(e.poi.name); //关键字查询查询

}

}

//关闭地图

function closeMap(){

$("#hid_map").hide();

}

//marker点击事件

function markerClick_CallBack(data){

//name

var name = data.data.name;

//address

var address = data.data.cityname+data.data.adname+data.data.address;

//经度

var latitude = data.data.location.lat;

//纬度

var longitude = data.data.location.lng;

$('#address').val(address);

$('#name').val(name);

$('#latitude').val(latitude);

$('#longitude').val(longitude);

}

//生成静态地图

function rocaAdd(){

var name = $('#name').val();

//address

var address = $('#address').val();

//经度

var latitude = $('#latitude').val();

//纬度

var longitude = $('#longitude').val();

if(name=="" || address=="" || latitude=="" || longitude==""){

alert('请选择位置');

}

var src = "https://restapi.amap.com/v3/staticmap?key={$key_image}&location="+longitude+","+latitude+"&zoom=19&size=264*92&markers=mid,0xFF0000,A:"+longitude+","+latitude;

$("#all_content .textarea").each(function(){

if($(this).text() == ""){

//$(this).attr("class","hid");

$(this).hide();

}

});

var map =

"

"+

"

"+name+"

"+

""+

"

地图

"+

"

";

$("#all_content").append(map);

$("#all_content").append('

$("#hid_map").hide();

}