使用Highcharts地图添加交互式地图

Question

我是一个尝试使用Highcharts maps用JavaScript实现交互式地图的新手(http://www.highcharts.com/products/highmaps).

我已经设法绘制了海地的基本地图。请参阅：http://jsfiddle.net/mattbowlby/P8KZQ/2/

我将地图的JavaScript放在一个名为海地的文件中。js。这是该文件的内容：

$(function () {

    // Initiate the chart
    $('#container').highcharts('Map', { 
        series: [ 
    { 
        "type": "map",
        "data": [
      {
        "name": "Ouest",
        "path": "M587,-486L584,-485L578,-494L575,-496L564,-497L533,-504L522,-505L511,-507L479,-527L448,-535L440,-541L432,-551L426,-555L421,-560L418,-568L419,-572L423,-577L429,-581L436,-584L444,-585L452,-584L501,-564L526,-557L553,-543L578,-533L588,-521L591,-513L592,-503L591,-494ZM896,-428L909,-415L902,-420L896,-428ZM950,-485L944,-479L937,-466L933,-461L919,-456L893,-461L880,-458L875,-454L873,-468L869,-474L859,-465L855,-454L856,-441L865,-428L884,-419L887,-412L890,-409L898,-409L910,-413L913,-406L908,-402L907,-398L909,-391L914,-389L928,-385L931,-383L940,-372L953,-363L972,-356L981,-349L977,-342L946,-336L928,-347L904,-348L874,-348L844,-354L813,-360L783,-357L754,-359L744,-370L734,-369L718,-377L705,-377L694,-372L685,-361L669,-354L656,-353L652,-349L638,-348L630,-341L624,-341L619,-344L616,-334L612,-331L609,-326L597,-329L585,-332L575,-325L568,-328L564,-334L553,-335L536,-331L532,-339L526,-346L521,-353L518,-362L512,-368L503,-368L502,-378L508,-387L505,-396L530,-401L561,-394L559,-388L575,-392L581,-393L587,-390L612,-386L625,-390L635,-398L642,-409L647,-423L656,-433L667,-436L726,-431L729,-436L733,-436L743,-426L746,-424L753,-426L755,-432L756,-440L755,-463L756,-467L762,-478L757,-485L741,-492L728,-493L724,-494L716,-500L710,-508L703,-513L694,-512L682,-519L676,-529L658,-557L646,-568L638,-572L626,-577L631,-583L637,-588L660,-587L694,-583L703,-583L711,-573L729,-565L738,-559L747,-550L756,-538L768,-531L780,-528L791,-521L812,-500L839,-492L867,-501L895,-507L919,-499L934,-495L947,-488Z"
      },
      {
        "name": "Grand'Anse",
        "path": "M273,-447L265,-442L253,-442L245,-447L244,-457L252,-461L264,-460L273,-455ZM13,-357L12,-365L9,-370L0,-382L12,-400L10,-405L16,-409L20,-427L25,-430L26,-437L22,-448L25,-451L37,-458L52,-465L59,-466L71,-464L74,-470L82,-471L102,-470L116,-467L162,-447L182,-446L187,-439L193,-441L208,-434L224,-434L232,-431L239,-425L245,-423L250,-426L258,-424L264,-425L261,-419L255,-412L257,-407L263,-404L255,-396L249,-381L226,-375L210,-375L205,-367L206,-359L189,-360L172,-364L157,-369L142,-373L107,-370L52,-358L33,-356L23,-358Z"
      },
      {
        "name": "Nord-Ouest",
        "path": "M601,-992L634,-979L649,-971L645,-962L639,-964L609,-968L596,-973L579,-977L573,-979L561,-976L545,-980L537,-984L532,-989L537,-991L553,-997L570,-999L580,-1000L587,-999ZM633,-896L622,-897L608,-888L601,-886L579,-867L553,-862L538,-864L524,-865L510,-869L496,-867L480,-850L478,-828L472,-824L468,-823L455,-827L447,-832L443,-836L436,-829L421,-827L387,-828L377,-830L368,-838L360,-843L356,-863L368,-883L370,-887L373,-887L392,-896L392,-898L372,-898L378,-903L399,-903L441,-923L453,-933L460,-942L465,-937L469,-936L479,-937L493,-933L504,-933L516,-936L527,-934L530,-930L533,-936L539,-940L547,-941L554,-938L563,-942L575,-945L586,-947L597,-946L633,-938L649,-930L670,-924L671,-922L668,-920L663,-910L652,-900L639,-904L634,-903Z"
      },
      {
        "name": "Sud",
        "path": "M281,-264L283,-262L287,-265L293,-259L310,-259L317,-258L322,-255L322,-250L318,-247L311,-246L297,-247L291,-248L285,-251L276,-259L278,-263ZM523,-294L494,-297L482,-296L468,-304L421,-311L400,-309L397,-310L399,-314L404,-316L416,-316L416,-319L393,-321L364,-320L356,-318L344,-311L337,-312L332,-321L327,-318L322,-305L315,-308L311,-305L307,-307L306,-312L307,-318L302,-316L298,-306L293,-302L294,-312L298,-320L288,-311L282,-312L281,-307L266,-295L240,-283L234,-277L228,-267L243,-251L247,-238L246,-235L242,-234L218,-234L211,-236L207,-244L184,-276L179,-279L177,-284L170,-290L136,-315L130,-318L119,-320L110,-325L108,-332L99,-334L87,-339L85,-337L78,-339L64,-331L56,-329L49,-330L35,-337L29,-345L15,-351L13,-357L23,-358L33,-356L52,-358L107,-370L142,-373L157,-369L172,-364L189,-360L206,-359L205,-367L210,-375L226,-375L249,-381L260,-380L272,-380L285,-375L293,-382L304,-383L314,-383L320,-377L325,-371L333,-367L326,-353L344,-348L367,-352L378,-353L389,-353L402,-357L413,-361L431,-359L450,-359L468,-357L476,-360L485,-358L498,-347L509,-337L513,-321L522,-308L524,-295Z"
      },
      {
        "name": "Nippes",
        "path": "M264,-425L276,-436L285,-437L305,-442L318,-439L318,-433L311,-428L302,-429L302,-427L287,-430L281,-429L273,-427L281,-422L287,-421L289,-413L295,-410L306,-412L312,-409L324,-416L339,-418L395,-415L402,-413L416,-406L424,-405L452,-406L466,-405L479,-400L491,-395L496,-394L505,-396L508,-387L502,-378L503,-368L512,-368L518,-362L521,-353L526,-346L525,-335L521,-325L522,-308L513,-321L509,-337L498,-347L485,-358L476,-360L468,-357L450,-359L431,-359L413,-361L402,-357L389,-353L378,-353L367,-352L344,-348L326,-353L333,-367L325,-371L320,-377L314,-383L304,-383L293,-382L285,-375L272,-380L260,-380L249,-381L255,-396L263,-404L257,-407L255,-412L261,-419Z"
      },
      {
        "name": "L'Artibonite",
        "path": "M626,-577L626,-578L588,-617L586,-626L601,-632L615,-633L622,-636L625,-641L623,-648L618,-652L606,-658L602,-662L593,-677L591,-683L597,-691L603,-703L607,-705L618,-707L622,-706L617,-716L613,-718L606,-719L602,-722L600,-729L602,-741L608,-737L614,-736L618,-739L616,-754L621,-754L629,-749L633,-749L626,-763L623,-764L605,-765L600,-769L592,-779L586,-784L563,-794L544,-805L532,-809L519,-819L514,-818L492,-826L478,-828L480,-850L496,-867L510,-869L524,-865L538,-864L553,-862L579,-867L601,-886L608,-888L622,-897L633,-896L637,-887L644,-882L646,-873L653,-875L660,-869L657,-857L662,-850L670,-847L675,-832L681,-817L691,-808L702,-800L715,-794L725,-798L725,-808L732,-807L738,-814L744,-814L756,-809L758,-785L772,-773L786,-766L792,-753L791,-743L792,-732L799,-722L802,-712L787,-689L785,-662L795,-653L791,-645L792,-636L795,-625L790,-606L794,-578L789,-566L788,-555L780,-550L763,-551L747,-550L738,-559L729,-565L711,-573L703,-583L694,-583L660,-587L637,-588L631,-583Z"
      },
      {
        "name": "Centre",
        "path": "M961,-706L973,-695L1000,-682L999,-660L997,-654L993,-647L976,-633L966,-619L951,-601L946,-598L928,-593L922,-589L923,-583L938,-587L947,-587L950,-584L955,-574L969,-560L971,-553L972,-538L975,-523L975,-516L971,-503L967,-496L962,-492L950,-485L947,-488L934,-495L919,-499L895,-507L867,-501L839,-492L812,-500L791,-521L780,-528L768,-531L756,-538L747,-550L763,-551L780,-550L788,-555L789,-566L794,-578L790,-606L795,-625L792,-636L791,-645L795,-653L785,-662L787,-689L802,-712L813,-708L821,-701L824,-696L831,-697L855,-712L880,-726L892,-719L906,-713L912,-707L930,-705L936,-705L949,-705Z"
      },
      {
        "name": "Nord-Est",
        "path": "M961,-706L949,-705L936,-705L930,-705L912,-707L906,-713L892,-719L880,-726L874,-745L856,-762L843,-766L846,-771L847,-781L841,-791L837,-801L832,-810L831,-819L832,-829L842,-833L849,-844L850,-858L853,-864L860,-860L866,-861L870,-866L874,-867L881,-872L891,-873L908,-868L917,-867L920,-865L918,-860L911,-857L901,-857L905,-851L911,-850L923,-853L933,-845L936,-852L936,-854L928,-856L924,-862L927,-868L940,-866L955,-866L960,-849L959,-833L961,-825L971,-802L976,-773L976,-757L970,-746L966,-735L951,-724L953,-717Z"
      },
      {
        "name": "Nord",
        "path": "M880,-726L855,-712L831,-697L824,-696L821,-701L813,-708L802,-712L799,-722L792,-732L791,-743L792,-753L786,-766L772,-773L758,-785L756,-809L744,-814L738,-814L732,-807L725,-808L725,-798L715,-794L702,-800L691,-808L681,-817L675,-832L670,-847L662,-850L657,-857L660,-869L653,-875L646,-873L644,-882L637,-887L633,-896L634,-903L639,-904L652,-900L663,-910L668,-920L671,-922L679,-913L688,-907L698,-904L703,-907L720,-900L730,-898L735,-899L737,-893L754,-878L754,-875L747,-878L753,-865L761,-864L759,-868L764,-873L759,-873L761,-878L759,-883L766,-880L773,-879L780,-882L786,-891L793,-891L798,-887L795,-878L801,-875L807,-874L820,-877L826,-875L831,-870L835,-869L847,-869L853,-864L850,-858L849,-844L842,-833L832,-829L831,-819L832,-810L837,-801L841,-791L847,-781L846,-771L843,-766L856,-762L874,-745Z"
      },
      {
        "name": "Sud-Est",
        "path": "M522,-308L521,-325L525,-335L526,-346L532,-339L536,-331L553,-335L564,-334L568,-328L575,-325L585,-332L597,-329L609,-326L612,-331L616,-334L619,-344L624,-341L630,-341L638,-348L652,-349L656,-353L669,-354L685,-361L694,-372L705,-377L718,-377L734,-369L744,-370L754,-359L783,-357L813,-360L844,-354L874,-348L904,-348L928,-347L946,-336L977,-342L962,-314L959,-307L959,-297L963,-286L965,-265L964,-259L960,-247L954,-251L928,-283L918,-292L905,-300L877,-309L865,-315L854,-319L840,-319L812,-314L775,-313L724,-312L696,-307L685,-312L683,-310L685,-296L682,-292L678,-292L663,-297L621,-292L613,-293L615,-285L605,-288L596,-282L576,-283L567,-279L557,-285L545,-289L531,-293L523,-294L524,-295Z"
      }
    ]
  }
]    
    });
});

现在，我很难在我的网页上列出这个。我已经将JavaScript代码放入一个名为“haiti.js”的文件中。我已经将CSS代码添加到我的CSS文件中。

我需要在HTML文件中添加什么HTML来显示地图？

这是我的HTML文件（maps.HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type='text/css' href="css/main.css" type="text/css">
    <script src="http://code.highcharts.com/maps/highmaps.js"></script>
    <script src="http://code.highcharts.com/maps/modules/map.js"></script>
    <script src="js/haiti.js"></script>
</head>
<body>

<div id="container">
</div>
</body>
</html>

这是我的CSS文件的内容：

#container {
  height: 500px; 
  width: 500px; 
  margin: 0 auto; 
}
.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

Answer 1

错误消息“$not defined”表示缺少jQuery。

您需要添加一个导入jQuery的脚本标记。将其添加到所有其他脚本标记之前的head标记中。如果您的服务器上没有版本，您可以使用Google托管的版本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果其他一切都是正确的，此更改将解决您的问题。