ÔõÑùÔÚThinkPHP6ÖоÙÐеØͼչʾ²Ù×÷£¿
Ëæ×ŵØͼӦÓõÄÆÕ±éʹÓã¬ÔõÑùÔÚwebÓ¦ÓóÌÐòÖÐչʾµØͼÒѾ³ÉΪÁËÒ»¸öÈÈÃÅ»°Ìâ¡£thinkphp6ÊÇÒ»¸öÊ¢ÐеÄphp¿ª·¢¿ò¼Ü£¬ÔõÑùÔڸÿò¼ÜÖоÙÐеØͼչʾ²Ù×÷ÊÇÒ»¸öÖµµÃ̽ÌÖµÄÎÊÌâ¡£±¾ÎĽ«ÏÈÈÝʹÓÃthinkphp6ʵÏÖµØͼչʾ¹¦Ð§µÄ°ì·¨ºÍÊÖÒÕ¡£
Ò»¡¢»ñÈ¡µØͼAPIÃÜÔ¿
Ê×ÏÈ£¬ÎÒÃÇÐèÒªÔÚʹÓõØͼÏà¹ØЧÀÍ֮ǰ»ñÈ¡Ò»¸öAPIÃÜÔ¿¡£Ò԰ٶȵØͼΪÀý£¬ÎÒÃÇ¿ÉÒÔÔڰٶȵØͼ¿ª·Åƽ̨ÉêÇëAPIÃÜÔ¿¡£ÉêÇëÀֳɺó£¬ÎÒÃÇ¿ÉÒÔÔÚ¿ª·¢ÕßÖÐÑëÖÐÕÒµ½×Ô¼ºµÄAK¡£ÔÚºóÐøµÄµØͼչʾÖУ¬ÎÒÃÇÐèҪʹÓøÃAK¡£
¶þ¡¢¼¯³ÉµØͼAPI
ThinkPHP6¼¯³ÉµØͼAPIµÄÒªÁìºÍͨË×µÄPHPÏîÄ¿Ò»Ñù¡£ÎÒÃÇ¿ÉÒÔÔÚÒ³ÃæÖÐÒýÈëJS¿â£¬²¢Ê¹ÓÃÏà¹Øº¯ÊýʵÏÖµØͼչʾ²Ù×÷¡£ÒÔÏÂÊÇÒýÈë°Ù¶ÈµØͼAPIµÄʾÀý´úÂ룺
Á¬Ã¦Ñ§Ï°¡°PHPÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
<!-- ÒýÈë°Ù¶ÈµØͼAPI¿â --> <script type="text/javascript" src="http://api.map.m.linesum.net/api?v=2.0&ak=ÄúµÄÃÜÔ¿"></script>
µÇ¼ºó¸´ÖÆ
ÔÚÒýÈëAPI¿âÖ®ºó£¬ÎÒÃÇ¿ÉÒÔʹÓðٶȵØͼÌṩµÄÏà¹Øº¯Êý³õʼ»¯µØͼ¡¢Ìí¼Ó±ê×¢¡¢»æÖÆͼÐεȡ£ÒÔÏÂÊdzõʼ»¯µØͼµÄʾÀý´úÂ룺
<!-- ½ç˵µØͼÈÝÆ÷ --> <div id="map"></div> <script type="text/javascript"> // ³õʼ»¯µØͼ var map = new BMap.Map("map"); // ÉèÖÃÖÐÑëµã×ø±êºÍµØͼ¼¶±ð var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); </script>
µÇ¼ºó¸´ÖÆ
ÒÔÉÏ´úÂë¿ÉÒÔÔÚÒ³ÃæÖÐÏÔʾһ¸ö°Ù¶ÈµØͼ£¬²¢½«µØͼÖÐÑëµãÉèÖÃΪ±±¾©ÊС£ÔÚÕâ¸ö»ù´¡ÉÏ£¬ÎÒÃÇ¿ÉÒÔÌí¼Ó±ê×¢¡¢»æÖÆͼÐεȲÙ×÷¡£
Èý¡¢Ê¹ÓõØͼ²å¼þ
ΪÁËÔ½·¢Àû±ãµØ¾ÙÐеØͼչʾ²Ù×÷£¬ÎÒÃÇ¿ÉÒÔʹÓÃһЩÊʺÏThinkPHP6µÄµØͼ²å¼þ¡£ÕâЩ²å¼þ¿ÉÒÔïÔÌ´úÂëÁ¿£¬Ìá¸ß´úÂë¿É¶ÁÐԺͿÉά»¤ÐÔ¡£ÒÔÏÂÊÇÏÈÈÝÁ½¸ö³£ÓõĵØͼ²å¼þ¡£
Leaflet²å¼þ
LeafletÊÇÒ»¸öÇáÁ¿¼¶µÄ¿ªÔ´JavaScriptµØͼ¿â£¬¿ÉÒÔÔÚÒƶ¯×°±¸ºÍ×ÀÃæä¯ÀÀÆ÷ÉÏʹÓ᣸ÿâÌṩÁËÖÖÖÖ¹¦Ð§£¬°üÀ¨½«Ê¸Á¿Í¼²ãÌí¼Óµ½µØͼÉÏ¡¢Ëõ·ÅµØͼºÍ»æÖÆÏßÌõµÈ¡£ÔÚʹÓÃThinkPHP6ʵÏÖµØͼչʾ¹¦Ð§Ê±£¬ÎÒÃÇ¿ÉÒÔʹÓÃThinkPHP6-leafletÀ©Õ¹°üÀ´¼¯³ÉLeaflet²å¼þ¡£¸ÃÀ©Õ¹°üÌṩÁËÒ»Ì×¼òÆÓ¶øÇ¿Ê¢µÄPHPÀà¿â£¬¿ÉÒÔÀû±ãµØÒýÈëLeaflet²å¼þ¡£
ÒÔÏÂÊÇʹÓÃThinkPHP6-leafletÀ©Õ¹°ü³õʼ»¯µØͼµÄʾÀý´úÂ룺
// ÒýÈëThinkPHP6-leafletÀ©Õ¹°ü use LeafletLeaflet; use LeafletMap; // ³õʼ»¯µØͼ $map = new Map('map', array(51.505, -0.09), 13); $leaflet->addMap($map);
µÇ¼ºó¸´ÖÆ
ÒÔÉÏ´úÂë¿ÉÒÔÔÚÒ³ÃæÖÐÏÔʾһ¸öLeafletµØͼ£¬²¢½«µØͼÖÐÑëµãÉèÖÃΪÂ׶ØÊС£ÔÚÕâ¸ö»ù´¡ÉÏ£¬ÎÒÃÇ¿ÉÒÔÌí¼Ó±ê×¢¡¢»æÖÆͼÐεȲÙ×÷¡£
MapBox²å¼þ
MapBoxÊÇÒ»¿îÃâ·ÑµÄµØͼ²å¼þ£¬ÌṩÁ˶àÖÖÆøÑæÆøÑæµÄµØͼºÍµ×ͼ¡£ÔÚʹÓÃThinkPHP6ʵÏÖµØͼչʾ¹¦Ð§Ê±£¬ÎÒÃÇ¿ÉÒÔʹÓÃThinkPHP6-mapboxÀ©Õ¹°üÀ´¼¯³ÉMapBox²å¼þ¡£¸ÃÀ©Õ¹°üÌṩÁËÒ»Ì×¼òÆÓ¶øÇ¿Ê¢µÄPHPÀà¿â£¬¿ÉÒÔÀû±ãµØÒýÈëMapBox²å¼þ¡£
ÒÔÏÂÊÇʹÓÃThinkPHP6-mapboxÀ©Õ¹°ü³õʼ»¯µØͼµÄʾÀý´úÂ룺
// ÒýÈëThinkPHP6-mapboxÀ©Õ¹°ü use MapBoxMapBox; use MapBoxMap; // ³õʼ»¯µØͼ $map = new Map('map', [ 'style' => 'mapbox://styles/mapbox/streets-v11', 'center' => [-77.036, 38.897], 'zoom' => 13 ]); $mapBox->addMap($map);
µÇ¼ºó¸´ÖÆ
ÒÔÉÏ´úÂë¿ÉÒÔÔÚÒ³ÃæÖÐÏÔʾһ¸öMapBoxµØͼ£¬²¢½«µØͼÖÐÑëµãÉèÖÃΪ»ªÊ¢¶ÙÌØÇø¡£ÔÚÕâ¸ö»ù´¡ÉÏ£¬ÎÒÃÇ¿ÉÒÔÌí¼Ó±ê×¢¡¢»æÖÆͼÐεȲÙ×÷¡£
ËÄ¡¢×ܽá
±¾ÎÄÏÈÈÝÁËÔÚThinkPHP6ÖоÙÐеØͼչʾ²Ù×÷µÄ°ì·¨ºÍÊÖÒÕ¡£ÎÒÃÇ¿ÉÒÔÖ±½ÓʹÓÃJS¿â¼¯³ÉµØͼAPI£¬Ò²¿ÉÒÔʹÓõØͼ²å¼þÀû±ãµØʵÏÖµØͼչʾ¹¦Ð§¡£ÎÞÂÛÑ¡ÔñÄÄÒ»ÖÖ·½·¨£¬ÎÒÃǶ¼¿ÉÒÔͨ¹ýÏà¹Øº¯ÊýºÍÀà¿âÇáËÉʵÏÖµØͼµÄÌí¼Ó¡¢±ê×¢ºÍ»æÖƵȲÙ×÷¡£
ÒÔÉϾÍÊÇÔõÑùÔÚThinkPHP6ÖоÙÐеØͼչʾ²Ù×÷£¿µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡