一年一度的情人节又要如期而至了，程序员在情人节如何告白？当然要将浪漫与代码结合起来啊！文艺范的告白——手掌地图你值得拥有。快来看看它的实际效果吧。
一、使用个性化地图将小岛变成爱心登录腾讯位置服务官网，注册帐号，在key管理里创建新密钥，QQ和微信都可以直接登录，而且个性化地图在网站和微信小程序中都可以使用哦。
现在该寻找一个心形岛了，我选择的是福建省泉州市西湖公园湖中心的小岛，在地图右下角：
提交成功之后我们就可以进行开发了，留意上面有个编号“style 1”下面也会用到，来段简单的代码验证一下我们的个性化地图是否生效吧： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>玉露改(绿色系恋爱风格)</title> <meta 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="http://map.qq.com/api/gljs?v=1.exp&key=这里改成你的key"></script> <script> window.onload = function () { function init() { var map = new TMap.Map(document.getElementById("container"), { //地图中心点，这里是心形岛的经纬度 center: new TMap.LatLng(24.932341,118.582993), //地图缩放级别，支持3～20 zoom: 20, //地图样式ID，有效值为”style[编号]”，与key绑定 mapStyleId: \'style1\' }); } init(); } </script> </head> <body> <div></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.Map(document.getElementById("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线路什么的，在走完一段之后给线段加个颜色，交给大家来实现吧。