1、首先创建高德地图账号，根据调用的接口申请高德地图API，这里使用了地图js API和Web服务 的key。首先引入高德地图调用的js接口
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>//Web服务 的key
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=AMap.Geocoder"></script>//地图js API的key
2、创建一个地图容器
<div id="container"></div>3、需要给容器设定高度和宽度
html,body{
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
overflow-y: hidden;
}4、js代码
//初始化地图对象，加载地图
var map = new AMap.Map("container", {
resizeEnable: true,
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
center: [104.164941,30.671515],
});
var geocoder = new AMap.Geocoder({
city: "", //城市设为北京，默认：“全国”
});
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
var lnglats = ["104.100303","30.654034"];//标记点的经纬度
//创建marker图标的大小和图片路径 ---如果是多个点可把下方代码放入循环进行循环标点
var startIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(32, 32),
// 图标的取图地址
image: '../img/biaoji.png',
// 图标所用图片大小
imageSize: new AMap.Size(32, 32),
// 图标取图偏移量
imageOffset: new AMap.Pixel(-5, 0)
});
//创建marker
var marker = new AMap.Marker({
position: lnglats,
icon: startIcon ,
map: map
});
marker.content = "<div>我是弹出内容</div>";//绑定点击marker弹出的内容样式
marker.on('click', markerClick);
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
//如果多个点循环结束的地方
map.setFitView();
window.onload = function() {
map.plugin(["AMap.ToolBar"], function() {
map.addControl(new AMap.ToolBar());
});
if(location.href.indexOf('&guide=1')!==-1){
map.setStatus({scrollWheel:false})
}
}
本资源由随笔博客发布。发布者：五维国度，转载请注明出处：http://blog.suibi.site/archives/4120
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 
