android 高德地图多个marker带图显示_js引入高德地图并加载固定地址的简单需求...-CSDN博客

开发平台配置准备

在高德地图开发平台注册开发者账号；

应用管理——创建新应用；

添加之后，选择“Web端(JS API)”，提交；

把下面出现的key值复制下来，自行保存，待会会用到；

页面基本配置

html代码（框架我用的wagtail，所以注释是这个鸟样）

{# 高德地图 #}
<div>
    {# 高德地图正式结构 #}
    <div id="mapGaode" style="width: 500px; height: 500px"></div>
</div>

我把尺寸设置进去了；

js代码

{# 引入高德地图 #}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key="></script>
{# 这里需要刚才申请的Key #}

<script>
//初始化地图插件
window.onload = function () {
    //必须异步
    var map = new AMap.Map('mapGaode');
    console.log('看看有没有执行地图');
    //层级
    map.setZoom(19);
    //中心坐标
    map.setCenter([113.325864, 23.124926]);
    //点标记的创建与添加
    var marker = new AMap.Marker({
        // 点标记的坐标
        position: [113.325864, 23.124926],
        map: map
    });
}

需要注意的是，层级【map.setZoom(19);】、中心坐标【map.setCenter([113.325864, 23.124926]);】、点标记的坐标【position: [113.325864, 23.124926],】这三个的具体数值在高德地图上并不能完全获取，尤其层级；

解决这个问题，可以打开百度地图开发平台——

搜索需要在初始化时请求的地址，上面会出现层级，右边会出现坐标，我们复制过来写死就可以了；

信息窗体

如果你还需要做一个这样的东西，这个叫做infoWindow，代码需要注意一下——

//构建信息窗体中显示的内容
// var info = [];
// info.push("<div class="amp-clearfix"><img class="amp-logo" src="' + logo + '"><div class="amp-content-box"><h1 class="title">广东蕴德律师事务所</h1><div class="amp-content">广州市天河区珠江东路30号广州银行大厦10楼</div></div></div>");
// info.push("<div><div><img style="flow:left;" src="http://webapi.amap.com/images/autonavi.png"/></dvi>");
// info.push("<div style="padding:0px 0px 0px 4px;"><b>相思*王维</b>");
// info.push("<b>红豆生南国， 春来发几枝。</b>")
// info.push("<span style="color:red;">愿君</span>多采撷， 此物最相思。")
// info.push("电话：444-556161     邮编 ：102020");
// info.push("地址：上海徐汇区</div></div>");
infoWindow = new AMap.InfoWindow({
    // content: info.join("<br/>")
    content: ' ',
    offset: new AMap.Pixel(0, -30),
    size: new AMap.Size(300, 0)
});
infoWindow.open(map, map.getCenter());

被注释掉得部分是网路上一些例子中出现的方法，也就是先设一个变量叫做info，然后往里面一行一行的push进html内容，最后放到方法里面的content参数进行运行；

这种方法有缺陷，一是需要分行push，二是在某些框架（比如wagtail）下需要改动格式的话会很难改，还可能出现不认push或者不认变量名的诡异报错（没错我就是为商业化框架考虑的）；

所以不如直接往content里面输入html元素就好，原汁原味噢；