异地恋程序员的表⽩代码：⼿掌地图
⼀年⼀度的情⼈节⼜要如期⽽⾄了，程序员在情⼈节如何告⽩？当然要将浪漫与代码结合起来啊！⽂艺范的告⽩——⼿掌地图你值得拥有。快来看看它的实际效果吧。
程序员表⽩⼿掌地图
⼀、使⽤个性化地图将⼩岛变成爱⼼
搬家公司收费标准登录腾讯位置服务官⽹，注册帐号，在key管理⾥创建新密钥，QQ和都可以直接登录，⽽且个性化地图在⽹站和⼩程序中都可以使⽤哦。
前往“控制台->个性化地图->个性化样式->样式选择”，从列表中选择⼀个模板“编辑样式”，这⾥我们选择的是⼆次元地图⾬露：
现在该寻⼀个⼼形岛了，我选择的是福建省泉州市西湖公园湖中⼼的⼩岛，在地图右下⾓：
⼀直放⼤地图，到西湖公园，可以看到现在⼼形岛是绿⾊的（绿地）。
我们将它的“填充颜⾊”换成红⾊，是不是⽴马就有红⼼的感觉了。同理，我们还可以更改陆地的颜⾊或将“填充透明度”设为0%以增加与背景图⼿的融合。
点击左上⾓的保存图标，并返回到上⼀页，发布我们刚才编辑的样式。
下⾯我们需要选择应⽤样式的key，还没有的话需要去key管理⾥创建⼀个，后⾯我们将⽤到。虽然本⽰例使⽤JSAPI GL进⾏演⽰，但还是必须在地图sdk和⼩程序中⾄少勾选⼀个，这⾥我们就选地图sdk吧。
提交成功之后我们就可以进⾏开发了，留意上⾯有个编号“style 1”下⾯也会⽤到，来段简单的代码验证⼀下我们的个性化地图是否⽣效吧：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
<title>⽟露改(绿⾊系恋爱风格)</title>
<meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <style type="text/css">
html,body{
width:100%;
height:100%;
}
*{
margin:0px;
padding:0px;
}
body{
老人过生日送什么好font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
width: 100%;
height: 100%;
}
</style>
<!--注意这⾥引⽤的是gl.js，才⽀持⾃定义样式-->
<script charset="utf-8"src="map.qq/api/gljs?p&key=这⾥改成你的key"></script>
我和孙悟空过一天优秀作文<script>
function init(){
var map =new TMap.ElementById("container"),{
//地图中⼼点，这⾥是⼼形岛的经纬度
center:new TMap.LatLng(24.932341,118.582993),
//地图缩放级别，⽀持3～20
zoom:20,
//地图样式ID，有效值为”style[编号]”，与key绑定
mapStyleId:'style1'
});
}
init();
中考加油家长寄语大全
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
上效果图，好⼤⼀个红⼼有没有，如果你有更好的颜⾊搭配，欢迎在评论⾥展⽰哦。
先初始化地图（页⾯背景图为⼿的照⽚，中间层放的地图，顶层图是把⼿扣掉的png）。中国黑帮
//⼼形⼩岛坐标
var hart =new TMap.LatLng(24.932215,118.582971);
/
/起始点坐标
var home =new TMap.LatLng(39.876019,116.411133);
var map =new TMap.ElementById("container"),{
//地图中⼼点
center:new TMap.LatLng(32.879587,111.972656),
//地图缩放级别，⽀持3～20
zoom:4,
//是否显⽰地图上的控件，默认true
showControl:false,
//地图样式ID，有效值为”style[编号]”，与key绑定
mapStyleId:'style1'
});
//移动路径的坐标
var path =[
home,
hart
十大金曲];
这⾥⼤家可以⽤MultiPolyline绘制折线，在地图上⾛出个520线路什么的，在⾛完⼀段之后给线段加个颜⾊，交给⼤家来实现吧。
然后向地图中添加情侣头像，⽤点标记MultiMarker来实现（⼩程序中⽤markers）：
var marker =new TMap.MultiMarker({
map,
styles:{
'car-down':new TMap.MarkerStyle({
'width':80,
'height':80,
'anchor':{
x:40,
y:40,
},
//头像路径
'src':'images/tj.jpg',
})
},
geometries:[{
id:'car',
styleId:'car-down',
//坐标
position: home,
}]
});
现在我们可以添加动画了，试了⼀下动画都是异步的，⽂档⾥没有回调，也⽆法链式调⽤，除了⽤setTimeout不知道⼤家有什么好办法没？
最后不能忘了⽤MultiLabel在地图上添加“我爱你”的⽂本标注：
//点击按钮
$("#btn").click(function(){
$("#btn").hide();
//沿着指定路径移动
'car':{
path,//坐标数组
speed:5201314//移动速度，正整数，单位：千⽶/⼩时
}
})
var duration =2000;
/
/平滑过渡到指定状态，mapStatus为key-value格式，可以设定center、zoom、rotation、pitch。 map.easeTo({center:hart},{duration});//移动地图
var duration2 =1000;
setTimeout(function(){
map.easeTo({ zoom:12},{ duration:duration2 });//缩放地图
setTimeout(function(){
map.easeTo({ zoom:18},{ duration:duration2 });
addLabel();
},3000);
}, duration);
});
//添加⽂本标注
function addLabel(){
//初始化label
var label =new TMap.MultiLabel({
id:'label-layer',
map: map,
styles:{
'label':new TMap.LabelStyle({
'color':'#D2000D',//颜⾊属性
'size':20,//⽂字⼤⼩属性
'offset':{ x:0, y:0},//⽂字偏移属性单位为像素
'angle':0,//⽂字旋转属性
'alignment':'center',//⽂字⽔平对齐属性
'verticalAlignment':'middle'//⽂字垂直对齐属性
})
},
geometries:[{
'id':'label',//点图形数据的标志信息
'styleId':'label',//样式id
'position':new TMap.LatLng(24.932711,118.583046),//标注点位置
'content':'我爱你',//标注⽂本
'properties':{//标注点的属性数据
'title':'label'
}
}]
});
}
⾄此，⼤功告成。欢迎各位⼩伙伴们在评论中秀出你的作品哦。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论