一、先到百度地图申请key
http://lbsyun.baidu.com/
注意一个问题：SHA1是一个固定值
BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58
二、代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>扶贫地图</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
$(function() { //Jquery 初始化
});
</script>
<script type="text/javascript">
var em = null,
map = null;
// H5 plus事件处理
function plusReady() {
// 确保DOM解析完成
if(!em || !window.plus || map) {
return
};
map = new plus.maps.Map("map");
//Map对象是通过DOM树中的节点进行定位，在构造时需传入一个DOM元素id，地图控件将会自动保持与DOM元素位置和大小完全一致。
map.centerAndZoom(new plus.maps.Point(105.250223,23.552879), 15); //文山州地图
//创建地图标点Marker对象
//ajax方式获取标注点
$.ajax({
type: "POST",
url: "http://172.16.1.116:8081/api/appinterface/getjson.ashx?action=maplw&cbiao=JZaddress",
data: "",
dataType: "json",
beforeSend: function() {},
complete: function() {},
success: function(d) {
//alert("成功");
//解析json
$.each(d.data, function(i, o) { //v是json数组
//alert(i + o.KeyId); //第i个值是
//在地图上秒回每个点
//alert(o.dtlw);
var jw=o.dtlw;
var jws=jw.split(",");
//alert(jws[0]);
var j=jws[0];
var w=jws[1];
var marker = new plus.maps.Marker(new plus.maps.Point(j,w));
marker.setIcon("/img/dq50.png");
marker.setLabel(o.addr);
// 用户点击标点将弹出标点上的文本
marker.onclick = function(marker) {
//小马把跳转链接放在这里
//逻辑写来这里
//alert("Clicked:" + marker.getLabel());
}
var bubble = new plus.maps.Bubble("云南省科技厅精准扶贫点:"+o.sspq);
marker.setBubble(bubble);
map.addOverlay(marker);
})
}
});
}
if(window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded", function() {
em = document.getElementById("map");
plusReady();
}, false);
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="map">地图加载中...</div>
</body>
</html>
三、以上ajax获得标注位置的json是
{"code":"0","data":[{"KeyId":17,"ownner":0,"depid":0,"sspq":"三片区","addr":"小木恩","dtlw":"105.242687,23.532533","remarks":"","add_time":"2017-06-17 09:29:23"},{"KeyId":16,"ownner":0,"depid":0,"sspq":"三片区","addr":"干沟","dtlw":"105.24381,23.539681","remarks":"","add_time":"2017-06-17 09:29:07"},{"KeyId":15,"ownner":0,"depid":0,"sspq":"三片区","addr":"木令二","dtlw":"105.261405,23.537306","remarks":"","add_time":"2017-06-17 09:28:30"},{"KeyId":12,"ownner":0,"depid":0,"sspq":"三片区","addr":"木令一","dtlw":"105.261405,23.537306","remarks":"","add_time":"2017-06-17 09:28:29"},{"KeyId":11,"ownner":0,"depid":0,"sspq":"三片区","addr":"木欧","dtlw":"105.270808,23.528143","remarks":"","add_time":"2017-06-17 09:28:28"},{"KeyId":10,"ownner":0,"depid":0,"sspq":"二片区","addr":"老寨","dtlw":"105.246132,23.562159","remarks":"","add_time":"2017-06-17 09:28:27"},{"KeyId":9,"ownner":0,"depid":0,"sspq":"二片区","addr":"大路","dtlw":"105.251131,23.567222","remarks":"","add_time":"2017-06-17 09:28:26"},{"KeyId":8,"ownner":0,"depid":0,"sspq":"二片区","addr":"堡上","dtlw":"105.253642,23.539304","remarks":"","add_time":"2017-06-17 09:28:25"},{"KeyId":7,"ownner":0,"depid":0,"sspq":"二片区","addr":"土地庙","dtlw":"105.271051,23.574356","remarks":"","add_time":"2017-06-17 09:28:24"},{"KeyId":6,"ownner":0,"depid":0,"sspq":"二片区","addr":"东瓜冲","dtlw":"105.262099,23.571673","remarks":"","add_time":"2017-06-17 09:28:23"},{"KeyId":5,"ownner":0,"depid":0,"sspq":"一片区","addr":"木宋","dtlw":"105.243522,23.58055","remarks":"","add_time":"2017-06-17 09:28:22"},{"KeyId":4,"ownner":0,"depid":0,"sspq":"一片区","addr":"对门","dtlw":"105.256673,23.576128","remarks":"","add_time":"2017-06-17 09:28:21"},{"KeyId":3,"ownner":0,"depid":0,"sspq":"一片区","addr":"大冲","dtlw":"105.250704,23.576969","remarks":"","add_time":"2017-06-17 09:28:20"},{"KeyId":2,"ownner":0,"depid":0,"sspq":"一片区","addr":"木洋","dtlw":"105.250223,23.552879","remarks":"","add_time":"2017-06-17 09:28:19"},{"KeyId":1,"ownner":0,"depid":0,"sspq":"一片区","addr":"转堡","dtlw":"105.262791,23.551757","remarks":"","add_time":"2017-06-17 09:28:18"}]}
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
